Firefox 滚动顶部问题

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

快速上下拖动窗口的行为难道不会被认为是异常吗？

在我看来，如果用户这样做，我不想保存状态。我宁愿等到窗口在同一位置至少 250 毫秒后再记录其位置。当用户上下猛击滚动条时位置的微小变化对用户来说可能不是很重要，明白我的意思吗？

借助一点 setTimeout 魔法，您能否回避这个问题，并通过在清除滚动位置之前不触发 SaveScrollLocation 来使您的脚本在浏览器 UI 上变得更轻一些吗？值得节省吗？

Answer 4

Firefox 不像其他浏览器那样频繁地触发 onscroll 事件。 参见此处

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

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

Answer 5

var last = +new Date;

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

window.onscroll = SaveScrollLocation ;