Question

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

我想要实现的功能：

滚动到div的顶部
滚动按下几个像素，但即使我的鼠标仍在鼠标按下，该功能也不会再次触发。

我认为这可能是我通过class DoSomething(forms.ModelForm): def __init__(self, user, *args, **kwargs): super(DoSomething, self).__init__(*args, **kwargs) for field in self.Meta.fields: self.fields[field].widget.attrs.update({ 'class': 'form-control', }) self.fields[field].label_classes = ('class_name1', 'class_name2', ) <label class="{% for class in field.label_classes %}{{ class }} {% endfor %}" for="{{ field.name }}">{{ field.label }}</label>检测到该功能的方式。如果我没有意义，请测试我的代码并查看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;
}

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

div中的JavaScript滚动问题？

1 个答案: