javascript - 当 window.scroll 事件由用户触发或由事件执行的代码触发时识别它

Question

我们是否有办法确定 window.scroll 事件是否已由用户鼠标触发或通过对某个事件调用函数来触发。我正在使用 ES6，带 Angular Typescript。

我确实看到过去有人问过这个与 jQuery 相关的问题，下面粘贴的建议解决方案现在不再有效。 e.originalEvent 始终存在，无论滚动是如何触发的。

$('#scroller').scroll(function(e) {
    if (e.originalEvent) {
        console.log('scroll happen manual scroll');
    } else {
        console.log('scroll happen by call');
    }
});

Answer 1

您可以使用鼠标滚轮事件、onwheel 来检测滚动是否由鼠标启动。

但是，这仅限于用户在将光标放在相关容器内时滚动鼠标滚轮的情况，将不会解决用户捕获并移动滚动条或滚动时出现的问题由向上或向下按键触发。

更好的方法可能是颠倒逻辑如何在下面的代码片段中处理 isWheel 标志，并使用由这些处理程序设置/取消设置的 isNotWheel 标志以编程方式触发并将滚动容器内容。

请注意，示例中使用了 timer 和 Set/ClearTimeout 来充分支持 Frefox，相比之下，它只在鼠标滚动开始时发出一次滚轮事件使用 Chrome，它在整个滚动运动期间同时发出滚轮事件和滚动事件。

$(() => {

  const main = document.getElementsByTagName('article')[0];
  const a = document.getElementsByTagName('a')[0];
  let isWheel = false;
  let timer = null;
  
  $(main).scroll( e => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      isWheel = false;
    }, 100);
    
    if (isWheel) {
      console.log('Scroll triggered by mouse wheel');
    } else {
      console.log('Scroll NOT triggered by mouse wheel');
    } 
  });
  main.addEventListener('wheel', e => {
    isWheel = true;
  });
  
  $(a).click( e => {
    main.scrollTo(0, 0);
  });
  
})

.main {
  height: 150px;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="main">
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
<div>
 scroll me
</div>
</article>
<a href="javascript:void(0);">Trigger scroll by "function"</a>