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');
    }
});

Answer 1

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

但是，这仅限于当用户在有问题的容器内移动光标时滚动鼠标滚轮的情况，并且在用户抓住并移动滚动条或滚动条时无法解决该问题。由向上或向下按键触发。

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

请注意，示例中使用timer和Set/ClearTimeout来充分支持Frefox，它在鼠标滚动开始时仅发出一次wheel事件，而Chrome则同时发出两个wheel事件。以及滚动事件在整个滚动过程中的滚动事件。

$(() => {

  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>

在用户或由事件执行的代码触发时识别window.scroll事件

1 个答案: