javascript - 使 "scrollLeft"/"scrollTop"更改不触发滚动事件监听器

Question

目前，我的程序处于这样一个位置:它既监听用户滚动某个元素，又有时自动自动滚动该元素。 (不是一个渐进的、漂亮的滚动，而是一个即时的跳跃。它在上下文中是有意义的，我发誓。)

如果通过设置 scrollLeft 或 scrollTop 完成滚动，是否有办法使滚动事件不触发？我的第一个想法是一个基本的开关，比如:

ignoreScrollEvents = true;
element.scrollLeft = x;
ignoreScrollEvents = false;

function onScroll() {
  if(ignoreScrollEvents) return false;
}

但由于事件不会立即触发(糟糕，duhh)，这不是一个可行的解决方案。我可以尝试其他什么类型的答案？我也在使用 jQuery，如果有帮助的话。

Answer 1

最简单的泛型方法？只需重置事件处理程序中的标志。您需要先检查您是否真的在更改该值，否则不会触发事件 - 如 Rodrigo notes ，这里的一个好的做法是将其分解为所谓的“setter”函数:

function setScrollLeft(x)
{
  if ( element.scrollLeft != x )
  {
    ignoreScrollEvents = true;
    element.scrollLeft = x;
  }
} 

...

function onScroll() 
{
  var ignore = ignoreScrollEvents;
  ignoreScrollEvents = false;

  if (ignore) return false;

  ...
}

但是，根据您的需要，您可能已经将滚动位置存储在某处；如果是这样，只需更新并将其检查为您的标志。像这样的东西:

element.scrollLeft = currentScrollLeft = x;

...

function onScroll() 
{
  // retrieve element, etc... 

  if (element.scrollLeft == currentScrollLeft) return false;

  ...
}