div中的JavaScript滚动问题？

Question

当用户滚动到div的顶部时,我正在尝试将滚动条向下推几个px.问题是,在向下滚动几个px之后(滚动到顶部之后),当我的鼠标仍然被点击时(鼠标按下),浏览器仍然认为我的鼠标位于div的顶部.这很糟糕,因为代码一直在触发.

我想要实现的功能:

1. 滚动到div的顶部

2. 滚动被向下推几个像素,但即使我的鼠标仍在鼠标按下,该功能也不会再次触发.

我想这可能是我通过检测功能的方式<div>.请测试我的代码,看看<div>我是否有意义.

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 位于顶部的事实是由于滚动条尚未释放而被向下推然后再次快速向上拖动的自然结果。据我所知，没有直接的方法可以取消这种交互。

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

演示

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元素以使其保持原始宽度，这样操作就不那么明显了。