Jerky jquery scroll movement in firefox
I have 2 divs in fixed positions on my page, the idea being that their content scrolls when the page scrolls. However, when using Firefox, when there are lots of other DOM objects on the page, movement (especially vertical) is very jerky. Performance is fine in chrome and IE7/8. Code is shown below -
If anyone can point out ways this can be optimised or streamlined I would be most grateful!
I am binding my window scroll event like so;
$(document).ready(function()
{
$(window).scroll(scrollMover);
});
Where scroll function is defined as
function scrollMover()
{
var offSets = getScrollXY();
document.getElementByID('divA').scrollLeft = offSets[0];
document.getElementByID('divB').scrollTop = offSets[1];
}
and
function getScrollXY()
{
var XOffset = 0, YOffset = 0;
if (typeof (window.pageYOffset) == 'number')
{
//Netscape compliant
YOffse开发者_如何学Got = window.pageYOffset;
XOffset = window.pageXOffset;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
//DOM compliant
YOffset = document.body.scrollTop;
XOffset = document.body.scrollLeft;
} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
//IE6 standards compliant mode
YOffset = document.documentElement.scrollTop;
XOffset = document.documentElement.scrollLeft;
}
return [XOffset, YOffset];
}
Here's a Live Example unfortunately it's a bit useless as the page has no scrollbars! ;)
Edit: here's an Updated Example, complete with scroll bars! kindly provided by fudgey.
Hello I had the same exact problem in Firefox with a div positioned on the right side! I did a little searching and found it is related to firefox's rendering of the position: fixed when using the scroll function. I believe jQuery changes it to the position absolute which causes this weird glitch. My solution was to change the divs to position: absolute. Here is some sample code:
function scrollingDiv() {
var scrolledY = (document.all ? document.scrollTop : window.pageYOffset);
var newHeight = Math.floor(scrolledY);
var totalPageHeight = $(document).height();
if (newHeight < 150) { newHeight = 150; } //This is if you want the div placed below an element and is the offset found in the css
else if (newHeight > totalPageHeight) { newHeight = totalPageHeight}
$("#right-div").css({ 'top' : newHeight + 'px'});
}
Running the function:
$(window).scroll(function() { scrollingDiv() });
Sample CSS:
#right-div {
z-index: -99; /*set to this so it appears under other elements not necessary */
position: absolute;
top: 150px; /*offset from top*/
right: 0;
width: 300px; /*width of div*/
height: 100%; /*if you want it to fill up the entire page*/
overflow: visible; }
I hope this helps people experiencing the same bug in Firefox.
精彩评论