Firefox scrollTop问题

Question

我的Firefox scrollTop值和onscroll事件有问题。这在IE，Safari和Chrome中效果很好，但Firefox似乎滞后。

我尝试使用onscroll事件更新一些背景位置，但是当我拿起手柄并快速上下拖动时，Firefox会停止更新scrollTop值，这会导致我的应用程序出现延迟。

您可以尝试此代码并在拖动句柄时查看Firefox控制台，您会看到某些内容会停止更新：

function SaveScrollLocation () {
    console.log(document.documentElement.scrollTop);
}

window.onscroll=SaveScrollLocation ;

知道如何让Firefox响应更快吗？

Answer 1

有两种方法可以解决这个问题 - 油门（执行具有设定间隔的功能）和去抖动（在自上次调用后经过指定时间后执行功能）。您可能希望在您的情况下使用限制。

简化的解决方案可能如下所示（已更新：在http://jsfiddle.net/yVVNU/1/看到它）：

    window.onscroll=catchScroll;
    var timeOutId = 0;
    var jitterBuffer = 200;
    function catchScroll()
        {
            if (timeOutId) clearTimeout (timeOutId);
            timeOutId = setTimeout(function(){SaveScrollLocation()}, jitterBuffer);
        }

    function SaveScrollLocation () {
        console.log(document.documentElement.scrollTop);
        alert('scrolled');
    }

您也可以使用此jQuery插件：http://benalman.com/projects/jquery-throttle-debounce-plugin/

Answer 2

$(window).scrollTop()为我工作

Answer 3

Firefox不会（或不习惯）像其他浏览器一样频繁地触发onscroll事件。 see here

有趣的是，scrollTop确实以正确的频率更新，因此您可以使用其他事件，例如mousemove。我做的是这样的：

在第一个滚动事件中，开始侦听鼠标移动事件 - 根据正确更新的scrollTop更新您想要的内容。在onscroll之后经过短暂超时后，停止侦听鼠标移动事件。

Answer 4

快速拖动窗口的行为不会被视为异常吗？

在我看来，如果用户这样做，我不想保存状态。在记录它的位置之前，我宁愿等到窗口处于同一位置至少250ms。当用户向上和向下猛击滚动条时，位置的微小差异可能对用户来说不是很重要，知道我的意思吗？

有一点setTimeout魔法，你不能回避这个问题并且通过不触发SaveScrollLocation使你的脚本在浏览器UI上轻一点，直到它清除滚动位置是值得保存？

Answer 5

var last = +new Date;

function SaveScrollLocation () {
    var now = +new Date;
    if (now - last > 50) {
      // ...
      last = now;
    }
}

window.onscroll = SaveScrollLocation ;