当鼠标向上拉滚动条时，如何防止在调整“scrollTop”后触发滚动事件

How to prevent scroll event from firing after adjusting `scrollTop` when mouse pulls up scrollbar?

本文关键字：scrollTop 调整 事件 滚动 何防止 鼠标 滚动条      更新时间：2023-09-26

当用户滚动到<div>的顶部时，我试图将滚动条向下推几个像素。问题是，在向下滚动几个像素后（在我滚动到顶部后），浏览器仍然认为我的鼠标在<div>的顶部，而我的鼠标仍然被按下（mousedown）。这很糟糕，因为事件不断发生。

我正在努力实现的功能：

  1. 滚动到<div>的顶部
  2. 滚动被向下推了几个像素，但即使我的鼠标仍在向下移动，该功能也不会再次启动

我想这可能是我通过onscroll检测函数的方式。如果我说不通，请测试我的代码并查看console.log()。

var wrapper = document.getElementById('scroll-box');
wrapper.onscroll = function (evt){
  //detect when scroll has reached the top of the frame
  if(wrapper.scrollTop === 0){
      console.log('top of frame');
      wrapper.scrollTop += 500;
  }
  //detect when scroll has reached the bottom of the frame
  if(wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight){
    console.log('bottom of frame');
  }
}
wrapper.scrollTop += 3000;
.scroll-box {
  width: 400px;
  height: 300px;
  background-color: gray;
  overflow-y: scroll;
}
  
div ul li {
  padding: 50px;
}
<div class="scroll-box" id="scroll-box">
  <ul>
    <li>messages</li>
    <li>messages</li>
    <li>messages</li>
    <li>messages</li>
    <li>messages</li>
    <li>messages</li>
    <li>messages</li>
    <li>messages</li>
    <li>messages</li>
  </ul>
</div>

正如评论中所提到的，事件将继续启动并记录div位于顶部，这是由于滚动条尚未释放，它被向下推，然后再次快速向上拖动的自然结果。就我所见，没有直接的方法可以取消这种互动。

但如果不创建自定义滚动条，这可能是最快的修复方法，即使这是一个小黑客：

演示

var wrapper = document.getElementById('scroll-box'),
size = wrapper.clientWidth;
wrapper.addEventListener('scroll', function() {
  if (!wrapper.scrollTop) {
    console.log('top of frame');
    wrapper.scrollTop += 500;
    wrapper.setAttribute('style', 'width: ' + size + 'px; overflow: hidden');
    setTimeout(function() {
      wrapper.removeAttribute('style');
    }, 0);
  }
});
wrapper.scrollTop += 200;

通过在尽可能短的时间内隐藏溢出来消除滚动事件。并设置元素的clientWidth，使其保持原来的宽度，这样操作就不那么引人注目了。

相关文章：