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

你可以在SimpleScroll上看到这种效果：使用Safari、Chrome或Firefox，缩小到页面元素非常小，滚动条停止移动

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

以下是相关片段：

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，并大幅降低速度，但没有结果；我被难住了。关于为什么缩放级别会影响在计时器回调中滚动的能力，有什么想法吗？

我想出来了：它看起来与缩放时“像素”的构成有关；单个像素更改的计算结果小于一个像素，这不会导致任何更改。我计划向开发者提交一份bug报告；目前，我已经实施了以下黑客解决方法：

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);

---

我想出来了：它看起来和缩小时“像素”的构成有关；单个像素更改的计算结果小于一个像素，这不会导致任何更改。我计划向开发者提交一份bug报告；目前，我已经实施了以下黑客解决方法：

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);

---

步骤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();   

---

步骤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();