在Firefox中生澀的jquery滾動運動

我的頁面上有2個固定位置的div，這個想法是當頁面滾動時它們的內容會滾動。但是，當使用Firefox時，當頁面上有很多其他DOM對象時，移動（特別是垂直）非常不穩定。在Chrome和IE7/8中性能很好。代碼如下所示 -在Firefox中生澀的jquery滾動運動

如果有人可以指出這可以優化或精簡的方式，我將不勝感激！

我綁定我的窗口滾動事件像這樣;

$(document).ready(function() 
{ 
    $(window).scroll(scrollMover); 
});

凡滾動功能被定義爲

function scrollMover() 
{   
    var offSets = getScrollXY(); 
    document.getElementByID('divA').scrollLeft = offSets[0]; 
    document.getElementByID('divB').scrollTop = offSets[1];

}

和

function getScrollXY() 
{ 
var XOffset = 0, YOffset = 0; 
if (typeof (window.pageYOffset) == 'number') 
{ 
    //Netscape compliant 
    YOffset = 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]; 
}

這裏有一個Live Example不幸的是它是一個有點用處的頁面沒有滾動條！ ;）

編輯：這是一個Updated Example，完成滾動條！友情提供fudgey。

來源

2010-06-25 RYFN

我已經更新了演示（http://jsfiddle.net/Ss78Z/2/），添加了一個非常大的div，因此您現在可以滾動：P ...但是我看到您已經爲scrollMover函數中的頂部和側邊div，所以我看不到任何其他改進腳本的方式。 – Mottie 2010-06-25 13:24:52

@fudgey，感謝您的輸入，我不確定全局變量是不是一個好主意:)不可否認，這些內容在FF內部都是很奇怪的，但在其他瀏覽器中它的效果非常好！ – RYFN 2010-06-25 13:41:39

你好，我有一個確切的問題在火狐與位於右側的股利！我做了一些搜索，發現它與Firefox的位置渲染有關：在使用滾動功能時是固定的。我相信jQuery將它改變爲絕對的位置，導致這個奇怪的故障。我的解決方案是將div改爲position：absolute。下面是一些示例代碼：

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

運行功能： $(window).scroll(function() { scrollingDiv() });

樣品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; }

我希望這有助於人們遇到在Firefox相同的錯誤。

來源

2013-06-04 20:18:09 Bits8myBytes

在Firefox中生澀的jquery滾動運動

回答

相關問題