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();
精彩评论