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

这是一个 Live Example ，不幸的是，由于页面没有滚动条，它有点无用！ ;）

编辑：这是一个 Updated Example ，包含滚动条！由 fudgey 提供。

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中遇到同样的错误。

在Firefox中的生涩的jquery滚动运动

1 个答案: