javascript - 火狐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像其他浏览器那样频繁地触发该事件。 看这里

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

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

Answer 4

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

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

有一点setTimeout魔法，你能不能回避这个问题，让你的脚本在浏览器 UI 上更轻一些，SaveScrollLocation直到它清除滚动位置值得保存？

Answer 5

var last = +new Date;

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

window.onscroll = SaveScrollLocation ;