火狐浏览器中JQuery滚动动画不流畅

Question

我在页面上有两个固定位置的div，其内容应当随着页面的滚动而滚动。然而，在Firefox中，当页面上有很多其他DOM对象时，移动（尤其是垂直移动）非常卡顿。在Chrome和IE7/8中性能良好。下面是代码 -

如果有人能指出如何优化或简化代码，我将不胜感激！

我绑定窗口滚动事件的方式如下：

$(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];
}

这里有一个实时示例，不幸的是，该页面没有滚动条！ ;)

编辑：这里有一个更新的示例，包含滚动条！由fudgey友情提供。

- RYFN

---

我已经更新了你的演示（http://jsfiddle.net/Ss78Z/2/），添加了一个非常大的div，这样你现在可以滚动了:P ...但是我看到你已经在scrollMover函数中定义了顶部和侧边栏div的变量，所以我看不到任何其他改进你的脚本的方法。 - Mottie

@fudgey，感谢你的建议，我不确定全局变量是不是一个好主意 :) 在 FF 深处肯定有一些奇怪的东西，但其它浏览器能够正常工作就太好了！ - RYFN

Answer 1

你好，我在Firefox中遇到了与div定位在右侧相同的问题！我进行了一些搜索，发现这与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中遇到相同问题的人。

- Bits8myBytes