火狐scrollTop问题答案

【问题标题】：Firefox scrollTop problem火狐scrollTop问题
【发布时间】：2011-06-29 08:12:26
【问题描述】：

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

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

您可以尝试此代码并在拖动手柄时查看 Firefox 控制台，您将看到值停止更新：

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

window.onscroll=SaveScrollLocation ;

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

【问题讨论】：

标签： javascript firefox scroll scrolltop onscroll

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

有两种方法可以处理这个问题 - 节流（以设定的时间间隔执行函数）和去抖动（在自上次调用后经过指定时间后执行函数）。您可能希望在您的情况下使用节流。

简化的解决方案可能如下所示（已更新：请参阅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/

【讨论】：

+1 表示插件的链接。那个 jsfiddle 似乎没有做好事，但是whatevs :)
是因为忘记注释掉console.log(document.documentElement.scrollTop);这一行，导致console.log未定义导致报错。
jquery 油门插件似乎是我正在寻找的。非常感谢！
好答案。它帮助我解决了由 Ivan Karajas 链接的问题：alert scrolling issue。谢谢。

【解决方案4】：

var last = +new Date;

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

window.onscroll = SaveScrollLocation ;

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

这实际上有助于当前的 Firefox 滚动防止策略