jQuery SimplyScroll 插件在某些缩放级别上中断

Question

您实际上可以在 SimplyScroll 演示页面上看到此效果：使用 Safari、Chrome 或 Firefox，然后缩小以至于页面元素非常小，并且滚动条停止移动。

我已经进行了测试和实验，看来scrollLeft 值在setInterval 循环内递增，但它不会“粘住”，而只是停留在前一个滚动值。更奇怪的是，从控制台手动更改滚动值效果很好。

这是相关的片段：

self.interval = setInterval(function() {
    // snip

    // increment by 1 pixel
    self.$clip[0].scrollLeft += self.o.speed;

    // scrollLeft value is unchanged

    // snip

},self.intervalDelay); // usually set to 41

我尝试用 requestAnimationFrame 替换 setInterval，并且还大幅降低速度，但没有结果；我很困惑。关于为什么缩放级别会影响计时器回调内滚动的能力有什么想法吗？

Answer 1

我想通了：看起来它与缩小时构成“像素”的内容有关；单个像素的变化计算为小于一个像素，这不会导致任何变化。我计划向开发人员提交错误报告；目前，我已经实施了以下hack解决方法：

self.interval = setInterval(function() {

    // snip

    var elem = self.$clip[0];
    var scrollLeft = elem.scrollLeft

    // increment by 1 pixel
    elem.scrollLeft += self.o.speed;

    // Zoom out hack: raise pixel values until a change actually takes place
    if(elem.scrollLeft == scrollLeft) {
        elem.scrollLeft += (self.o.speed + 1);
        if(elem.scrollLeft == scrollLeft)
            elem.scrollLeft += (self.o.speed + 2);
    }

    // snip

},self.intervalDelay);

Answer 2

第 1 步：在下面添加函数

fixScrollNotRunWhenBrowserZoomout: function(){
    var self = this;
    var speed = self.o.speed;
    var sp = self.$clip[0].scrollLeft;
    var intervalHandle = setInterval(function(){
        self.$clip[0].scrollLeft += speed;
        if (Math.floor(self.$clip[0].scrollLeft) !== sp || speed == 100){
            clearInterval(intervalHandle);
            self.o.speed = speed;
        }
        speed++;    
    }, 100);
}

第 2 步：在 init 函数上调用它

init: function() {

    this.$items = this.$list.children();
    this.$clip = this.$list.parent(); //this is the element that scrolls
    this.$container = this.$clip.parent();
    this.$btnBack = $('.simply-scroll-back',this.$container);
    this.$btnForward = $('.simply-scroll-forward',this.$container);

    this.fixScrollNotRunWhenBrowserZoomout();