JavaScript滚动事件

news2024/11/20 0:33:35

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

✨ 前言

滚动是网页交互不可或缺的一部分。监听页面和元素的滚动事件,可以帮助我们实现许多实用的功能。

本文将详细介绍页面与元素的滚动事件,如何跟踪滚动距离,以及判断滚动到底部的方法。通过学习,相信大家可以轻松处理各种滚动需求,丰富页面交互体验。

✨ 正文

本文介绍页面和元素的滚动事件。

页面滚动

当页面滚动时,会触发 document 的 scroll 事件:

document.onscroll = () => {
  // 页面滚动时做些什么  
};

还可以通过 scrollY 属性读取垂直滚动距离:

document.onscroll = () => {
  let scrolled = document.documentElement.scrollTop;
  // scrolled equal to scrollY for compatibility  
};

元素滚动

对于可滚动元素,我们可以监听 scroll 事件:

// HTML
<div id="container" style="height: 200px;overflow: auto">
  ...大量内容...  
</div>

// JavaScript 
container.onscroll = () => {
  // 容器滚动时显示滚动距离
  alert(`Scrolled ${container.scrollTop} px from top`); 
};

这适用于任意 overflow 为 scroll, auto 或 overlay 的元素。

滚动到底部检查

一个常见需求是检查用户是否滚动到页面或元素底部:

// container 为可滚动元素 
container.onscroll = function() {
  if (container.scrollTop + container.clientHeight == container.scrollHeight) {
    // 滚动到底部
  }
};

是通过对比滚动距离和总高度来判断。

scroll事件频率控制

scroll事件会高频触发,通常每100-200毫秒触发一次。这可能导致性能问题。

我们可以使用throttle或debounce来限制回调函数的调用频率:

// throttle 版
let throttleScroll = throttle(onScroll, 100);

elem.addEventListener('scroll', throttleScroll);

// debounce 版 
let debounceScroll = debounce(onScroll, 200);

elem.addEventListener('scroll', debounceScroll);

这样可以避免scroll事件过于频繁地触发处理函数。

滚动内容变化监听

有时我们需要在元素滚动范围内的内容变化时得到通知。可以监听resize和scroll事件来处理:

elem.addEventListener('resize', onResizeOrScroll);
elem.addEventListener('scroll', onResizeOrScroll);

function onResizeOrScroll(){
  // 检查elem中内容变化  
}

resize事件确保加载更多内容时也能得到通知。

这在构建滚动diffs加载更多内容的界面时很有用。