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

Question

我们是否有办法识别window.scroll事件是否由用户鼠标触发或通过调用某个事件的函数。我正在使用 ES6，带有角度的 Typescript。

我确实看到过去曾提出过与 jQuery 相关的问题，并且粘贴在下面的建议解决方案现在不再起作用。e.originalEvent无论滚动是如何触发的，它总是在那里。

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

标签： javascriptangulartypescriptecmascript-6

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>