Question

您可以在SimplyScroll demo page上实际看到此效果：使用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();

jQuery SimplyScroll插件在一些缩放级别上打破

2 个答案: