【问题标题】: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 滚动防止策略
          猜你喜欢
          • 1970-01-01
          • 2011-06-04
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-11-04
          • 2012-08-30
          相关资源
          最近更新 更多