JS 监听滚动条事件

简介: JS 监听滚动条事件

获取滚动条位置代码

/**
* 获取滚动条位置
*/
function getScrollTop() {
   var scrollPos;
   if (window.pageYOffset)
   {
       scrollPos = window.pageYOffset;
   }
   else if (document.compatMode && document.compatMode != 'BackCompat')
   {
       scrollPos = document.documentElement.scrollTop;
   }
   else if (document.body)
   {
       scrollPos = document.body.scrollTop;
   }
   return scrollPos;
}

监听滚动条方法

/**
 * 监听滚动条 逻辑根据自己需求来哦
 */
window.onscroll = function () {
    let scrollPos = getScrollTop();
    console.log("scrollPos:",scrollPos);
    if (scrollPos == 0) {
        alert("页面已到顶部")
    }
}

效果

cfee99fc22174585b4602389a864a50a.png

相关文章
|
2月前
|
JavaScript 前端开发
js事件队列
js事件队列
|
26天前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
29 2
|
11天前
|
JavaScript
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
|
8天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
14 5
|
9天前
|
监控 JavaScript 前端开发
|
26天前
Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
这篇文章介绍了在Nest.js构建应用时,如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展,并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开,这是一个基于eventemitter2库的社区模块,提供了事件发布/订阅功能,使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块,包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结,集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力,构建出更为松耦合、易扩展且高度灵活的系统架构,是构建现代、响应迅速且具有高度解耦特性的Nest.
|
2月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
58 1
|
21天前
|
JavaScript 前端开发
|
2月前
|
JavaScript 前端开发 API
js全屏,监听页面是否全屏
js全屏,监听页面是否全屏
45 4
|
2月前
|
JavaScript 前端开发
js的回车事件
js的回车事件
41 3