jQuery SimplyScroll插件在某些縮放級別中斷

Question

您可以在SimplyScroll demo page上實際看到這種效果：使用Safari，Chrome或Firefox，並縮小到頁面元素非常小，滾動條停止移動。

我已經測試和實驗過，看起來scrollThft值在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

我想通了：它看起來像是什麼構成了一個「像素」縮小時;單像素變化評估爲小於一個像素，這導致不變。我計劃向開發者提交一份錯誤報告;現在，我已經實現了以下黑客解決方法：

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