js监听滚动事件

vivi_chou

于 2023-05-22 20:51:45 发布

阅读量8k

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_56006480/article/details/130814825

版权

文章介绍了如何使用JavaScript的window对象监听页面滚动事件，当事件触发时执行特定代码，例如打印日志或实现吸顶效果、图片懒加载。通过document.documentElement.scrollTop或document.body.scrollTop可获取滚动距离，结合window.innerWidth和window.innerHeight能实现响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听滚动事件可以使用window对象的scroll事件。具体代码如下：

window.addEventListener('scroll', function() {
  // 在这里编写需要执行的代码
  console.log('页面正在滚动');
});

当页面滚动时，scroll事件就会被触发，然后就可以在事件处理函数中编写相应的逻辑来实现需要的功能，比如实现吸顶效果、懒加载图片等等。

在事件处理函数中，可以使用document.documentElement.scrollTop或document.body.scrollTop来获取当前页面的滚动距离。同时也可以使用window.innerWidth和window.innerHeight来获取当前窗口的宽度和高度，以便在需要时进行响应式布局。