Js如何判断div内容滚动元素滚动到底部

nbstudy 发表于 2024-08-29 11:25:57

要判断div内容滚动到底部，可以监听div的滚动事件，并通过计算滚动条的位置和div的总高度来判断。

javascript 复制代码

// 假设你的div有一个id为'my-div'
const div = document.getElementById('my-div');
 
div.addEventListener('scroll', function() {
  // 当前滚动条的位置
  const scrollTop = this.scrollTop;
  // div的总高度，包括可见区域和隐藏的滚动内容
  const scrollHeight = this.scrollHeight;
  // div的可视区域高度
  const clientHeight = this.clientHeight;
 
  // 当滚动条位置加上可视区域高度大于总高度减去某个阈值时（可以自己定义这个阈值），
  // 可以认为内容滚动到将要滚动到底部
  const isScrollToBottom = scrollTop + clientHeight >= scrollHeight - 5; // 例如阈值为5px
 
  if (isScrollToBottom) {
    // 执行到达底部的操作
    console.log('滚动到底部了！');
  }
});