开发者

jQuery SimplyScroll plugin breaks on some zoom levels

You can actually see this effect on the SimplyScroll demo page: use Safari, Chrome or Firefox, and zoom out to the point that page elements are very small, and the scroller stops moving.

I've tested and experimented, and it appears that the scrollLeft value is being incremented within a setInterval loop, but it doesn't "stick", and just stays at the previous scroll value instead. Even more strangely, altering the scroll value manually from the console works just fine.

Here is the relevant snippet:

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

    // increment by 1 pixel
    self.$c开发者_如何学Clip[0].scrollLeft += self.o.speed;

    // scrollLeft value is unchanged

    // snip

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

I've tried replacing setInterval with requestAnimationFrame, and also drastically turning down the speed, and no results; I'm stumped. Any ideas on why zoom level is affecting the ability to scroll within a timer callback?


I figured it out: it looks like it has do with what constitutes a "pixel" when zoomed out; a single-pixel change evaluates to being less than one pixel, which leads to no change. I plan to file a bug report with the developer; for now, I've implemented the following hack workaround:

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


step 1: Add function below

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

Step 2: call it on init function

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜