Firefox的scrollTop问题 [英] Firefox scrollTop problem

问题描述

我有一个Firefox scrollTop值和onscroll事件的问题。这个工程在IE，Safari和Chrome浏览器很好，但Firefox似乎滞后。

我试图用onscroll事件更新一些背景位置，但是当我把手和拖动Firefox会停止更新scrollTop的值，这会导致我的应用程序出现一些滞后。

您可以尝试这段代码，并在拖放处理，你会看到值停止更新：

$ p $函数SaveScrollLocation（）{
console.log（文档.documentElement.scrollTop）;
}

window.onscroll = SaveScrollLocation;

任何想法如何让Firefox回应更快？

）自从上次通话以来通过）。您可能想在您的情况下使用限制。

简化的解决方案可能如下所示（更新：在 http://jsfiddle.net/yVVNU/1/ ）：

  window.onscroll = catchScroll; 
 var timeOutId = 0; 
 var jitterBuffer = 200; 
函数catchScroll（）
 {
 if（timeOutId）clearTimeout（timeOutId）; 
 timeOutId = setTimeout（function（）{SaveScrollLocation（）}，jitterBuffer）; 
 
 
函数SaveScrollLocation（）{
 console.log（document.documentElement.scrollTop）; 
 alert（'scrolled'）; 
} 
  

您也可以使用这个jQuery插件： http://benalman.com/projects/jquery-throttle-debounce-plugin/

I have a problem with Firefox scrollTop value and onscroll event. This works great in IE, Safari and Chrome but Firefox seems to lag.

I tried to update some background position with the onscroll event, but when I take the handle and drag it up and down quickly, Firefox stops updating the scrollTop value and it causes some lag in my app.

You can try this code and look in the Firefox console when dragging the handle and you will see the values something stops the updating :

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

window.onscroll=SaveScrollLocation ;

Any idea how to make Firefox respond more quickly?

解决方案

There are two ways to handle this - throttle (execute the function with a set interval) and debounce (execute the function after the specified time has passed since the last call). You'll probably want to use throttling in your situation.

A simplified solution may look something like this (Updated: see it at 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');
    }

You can also use this jQuery plugin: http://benalman.com/projects/jquery-throttle-debounce-plugin/

这篇关于Firefox的scrollTop问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！