jquery - Changing .scrollLeft on Firefox inside the scroll event causes lag -
the best way describe problem provide example:
basically, if @ in chrome, scroll past page 2, should start moving whole page left show page 3 on right. works fine in google chrome, if try same example in firefox... @ point of transition, scrolling becomes slow , sluggish.
i've tried running scroll function through simple function throttle events, worked-ish. in situation sluggishness gone, replaced few millisecond lag (obviously).
have of guys got advice me here?
// code included in case jsfiddle.net fails. $(function() { $('.totheright').css({ position: "absolute", left: "100%", width: "100%" }); $('#page3').css({ margintop: "40%" }); var page2offset = $('#page2').offset(); var page2width = $('#page2').width(); var scrollfunc = function() { var scrolltop = $(window).scrolltop(), scrollleft = $(window).scrollleft(); if(scrolltop > page2offset.top){ var diff = (scrolltop - page2offset.top) * 4; if(diff > page2width) $('html, body').scrollleft(page2width); else $('html, body').scrollleft(diff); } else if(scrollleft != 0) { $('html, body').scrollleft(0); } }; $(window).bind('scroll', scrollfunc); });
try following:
$(function() { var page2offset = $('#page2').position(); var page2width = $('#page2').width(); var scrollfunc = function() { var scrolltop = $(window).scrolltop(), scrollleft = $(window).scrollleft(); if(scrolltop > page2offset.top){ var diff = (scrolltop - page2offset.top) * 4; if(diff > page2width) $('html, body').scrollleft(page2width); else $('html, body').scrollleft(diff); } else if(scrollleft != 0) { $('html, body').scrollleft(0); } }; $(window).bind('scroll', scrollfunc); });
working fiddle here: http://jsfiddle.net/kmpdg/1/
Comments
Post a Comment