javascript - Firefox scrollTop 问题

Question

我对 Firefox scrollTop 值和 onscroll 事件有疑问。这在 IE、Safari 和 Chrome 中运行良好，但 Firefox 似乎滞后。

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

您可以尝试这段代码，并在拖动 handle 时查看 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/