如何在可滚动元素上侦听滚动事件？

Question

我想听特定元素上的滚动事件，因此在用户向上滚动消息框后，下面将有一个箭头图标指示更多消息。就像上面的YouTube在线聊天图像一样。

还是有另一种方法？

Answer 1

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

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

然后您可以使用element.scrollTop

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

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

Answer 2

您可以使用div触发的滚动事件，并在事件监听器上附加addEventListener()。

这里是一个示例，当用户滚动到底部时，该列表将更多项动态添加到列表中。

要检测用户何时到达最低点，请使用scrollHeight - scrollTop === clientHeight。

如果要滚动到底部，只需设置scrollTop = scrollHeight。

const list = [];
const ul = document.querySelector('ul');
const len = document.querySelector('span');
const button = document.querySelector('button');

button.addEventListener('click', () => {
  ul.scrollTop = ul.scrollHeight;
});

const appendBlock = () => {
  if (list.length >= 200) return;
  list.push(...Array.from({ length: 20 }, (_, i) => i + list.length));
  ul.innerHTML = list.map(i => `<li>Elem ${i}</li>`).join('');
  len.textContent = list.length;
}

ul.addEventListener('scroll', event => {
  const e = event.target;
  if (e.scrollHeight - e.scrollTop === e.clientHeight) {
    appendBlock();
  }
});

appendBlock();

#container {
  position: relative;
  border: 1px solid black;
  border-radius: 5px;
}
ul {
  height: 110px;
  overflow: auto;
}

button {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #08f;
  color: white;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
}

<div id="container">
  <ul></ul>
  <button>↓</button>
</div>
<br>
Number of items: <span id="len"></span>