JavaScript滚动事件

‍ 个人主页：《爱蹦跶的大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

  ...大量内容...  


// 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加载更多内容的界面时很有用。

✨ 结语

        滚动事件为我们提供了实时访问滚动状态的能力。合理使用可以避免过度重复渲染,优化性能。

        本文不仅介绍了滚动事件的监听方法,还展示了防抖处理和监听内容变化的技巧。希望通过这个博客,大家已可以轻松应对各种滚动事件处理需求。如果还有疑问,欢迎评论区讨论。

​