鼠标拉起滚动条时调整`scrollTop`后如何防止触发滚动事件？

Question

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

我想要实现的功能：

滚动到 <div>
滚动被向下推几个像素，但即使我的鼠标仍处于按下状态，该功能也不会再次触发。

我想这可能是我通过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>

Answer 1

如评论中所述，事件将继续触发并记录 div 位于顶部的事实是它被向下推然后又被快速向上拖动的自然结果，因为滚动条尚未发布。据我所知，没有直接的方法可以取消该交互。

但在不创建自定义滚动条的情况下，这可能是最快的修复方法，即使它是一个小问题：

Demo

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 以使其保持原始宽度，因此动作不那么明显。

鼠标拉起滚动条时调整`scrollTop`后如何防止触发滚动事件？

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

html

javascript

scroll

scrollbar