[JavaScript知识库]JavaScript原生 滚轮触底

JavaScript原生 滚轮触底

// 添加监听滚轮触发事件，当滚轮滚动时触发
window.addEventListener('scroll', bindHandleScroll);

bindHandleScroll() {
  // document.documentElement指向同一个容器元素，此处为body
  const scrollTop = document.documentElement.scrollTop; //滚动条顶端距离所在滚动框顶的距离
  const clientHeight= document.documentElement.clientHeight; //当前滚轮所在的可视窗口高度
  const scrollHeight= document.documentElement.scrollHeight; //滚动条所在滚动框的高度
  // 触底条件
  console.log(scrollTop + clientHeight >= scrollHeight); // 触底为true
}

window.onunload() {
  // 清除事件监听
  removeEventListener('scroll', bindHandleScroll);
}

当元素内容不够无法出现滚轮时，此条件成立，但是不会触发滚轮事件，可另行做判断。