Question

我试图通过单击按钮滚动项目列表，该按钮将自动向右或向左平滑滚动x像素。我在堆栈上发现了一些东西，这些东西帮了我大忙，使我无法正常工作。它滚动但不平滑，只是跳到我想要的位置。

我在stackoverflow上找到了此链接：Is there a way to make horizontal scrolling smoother

这帮助了我，我实现了它。但是它仍然不起作用

这是我到目前为止所做的：

首先，我获得了列表的容器并调用了函数：

const container = document.querySelector('.caroussel');
this.sideScroll(container, 'right', 25, 280, e);

然后我实现了该功能：

public sideScroll(element,direction,speed,step, e){
    let scrollAmount = 0;
    const eventWindow = window.event || e;
    const slideTimer = setInterval(function(){
        if(direction === 'left'){
            element.scrollLeft -= step;
            scrollAmount -= step;
        } else {
            element.scrollLeft += step;
            scrollAmount += step;
        }

        if(scrollAmount >= element.offsetWidth || scrollAmount >= element.offsetWidth*-1){
            window.clearInterval(slideTimer);
        }
    }, speed);
}

我猜测问题出在cleartInterval（）调用上。当我使用window.clearInterval（）时，它不显示动画，但会永远循环播放。

当我使用无window部分的clearInterval（）时，它只是跳转而没有动画。

有人知道如何解决此问题吗？

单击按钮不起作用时，水平平滑滚动

0 个答案: