javascript - 如何监听可滚动元素上的滚动事件？

Question

我想监听特定元素上的滚动事件，以便在用户向上滚动消息框后，下方会有一个箭头图标指示更多消息。就像上面的 Youtube 实时聊天图片一样。

或者有其他方法吗？

Answer 1

您可以收听 scroll event在任何元素上使用以下代码:

element.addEventListener("scroll", function(){
    // do stuff
});

然后您可以使用 element.scrollTop

获取该元素的当前滚动位置

从这里，您可以检查元素的滚动位置是否小于它的总高度。如果是，请显示您的按钮以向下滚动。单击带有向下箭头的按钮，您只需使用 element.scrollTo()它甚至在现代浏览器中内置了缓动效果。只需将滚动值作为包含元素的高度传递即可。