Vanilla JS 中的平滑水平滚动

Question

我有一个滑块，我想在单击箭头后实现平滑滚动。 以下是单击箭头后调用的代码。 为了平滑滚动，我使用了 setInterval。 每 10 毫秒，我都会迭代 scrollLeft，直到它到达(scroll/ 10)或容器的末尾。

问题是，例如，如果scroll变量是 795，它应该迭代 79.5，但 scrollLeft 属性总是去除小数，并且只迭代 79，因此永远不会满足条件。

解决这个问题的最佳方法是什么？

                    var slides = document.querySelector('#jackpots');                    
                    var scroll = slides.scrollLeft + slides.offsetWidth;
                    var interval = setInterval(function(){
                        if(slides.scrollLeft === scroll || slides.scrollWidth === (slides.scrollLeft + slides.clientWidth))
                            clearInterval(interval);
                        else
                            slides.scrollLeft += (scroll / 10);
                    }, 10)

Answer 1

这段代码

else
   slides.scrollLeft += (scroll / 10);

变成

else {
    if (Math.abs(slides.scrollLeft - scroll) < (scroll / 10))
        slides.scrollLeft = scroll;
    else
        slides.scrollLeft += (scroll / 10);
}

math.abs 部分会在制作sliders.scrollLeft = scroll 之前检查您是否在目的地附近，否则它会按照您当前的方式滚动。

Answer 2

使用scrollIntoView而不是设置 scrollLeft 并将滚动行为设置为平滑：

document.querySelector('#jackpots').scrollIntoView({
  behavior: 'smooth'
});

这是内置在新浏览器中的，您的方法不适用于 shadow doms 和跨域 iFrame。