要在页面上实现一个滚动展示区，一共有6个卡片，最开始只看到三个

点击卡片下面的向右箭头，卡片向右滚动滚动2个卡片的宽度，直到滚动到最右侧的位置

当然点击向左的箭头，卡片就会向左滚动2个卡片的宽度，直到回到最开始的位置。实现这个效果，需要用到scrollLeft

我们只要在每次点击箭头的时候，卡片滚动区域的scrollLeft加上(减去)我们想要滚动的距离就可以了。

var container = document.getElementById('container');if(direction == 'left'){  element.scrollLeft -= distance;} else {  element.scrollLeft += distance;}

但是，卡片比较宽，一次滚动2个宽度的距离，就会让卡片滚动变成一闪而过，体验效果不是很好。因此，我们要人为地给卡片滚动加上平滑效果，让它匀速缓慢的滚动到指定的位置。这里我们可以借助setInterval（为什么不是setTimeout，大家可以自己试试效果），在一个比较短的时间里，将要滚动的总距离(distance)拆成n份，使得卡片滚动每次加上一小份的距离，知道完成总的滚动距离为止。

var button = document.getElementById('slide');button.onclick = function () {  var container = document.getElementById('container');  scrollAmount = 0;  var slideTimer = setInterval(function () {    container.scrollLeft += 10;    scrollAmount += 10;    if (scrollAmount >= 100) {      window.clearInterval(slideTimer);    }  }, 25);};var back = document.getElementById('slideBack');back.onclick = function () {  var container = document.getElementById('container');  scrollAmount = 0;  var slideTimer = setInterval(function () {    container.scrollLeft -= 10;    scrollAmount += 10;    if (scrollAmount >= 100) {      window.clearInterval(slideTimer);    }  }, 25);};

当然，为了复用性，我们可以将这个抽成一个公共函数，这更符合我们的编程方式。

function sideScroll(element,direction,speed,distance,step){    scrollAmount = 0;    var slideTimer = setInterval(function(){        if(direction == 'left'){            element.scrollLeft -= step;        } else {            element.scrollLeft += step;        }        scrollAmount += step;        if(scrollAmount >= distance){            window.clearInterval(slideTimer);        }    }, speed);}

使用起来也非常简单

var button = document.getElementById('slide');button.onclick = function () {    var container = document.getElementById('container');    sideScroll(container,'right',25,100,10);};var back = document.getElementById('slideBack');back.onclick = function () {    var container = document.getElementById('container');    sideScroll(container,'left',25,100,10);};

到这里，我们已经实现了一个可以平滑滚动的滚动效果了。