两种js监听滚轮事件的实现方法


Posted in Javascript onMay 13, 2016

前段时间在写前端的时候,需要监听浏览器的滚轮事件

网上查了一下,找到两种监听滚轮事件的方法:

一、原生js通过window.onscroll监听

//window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

//scrollTop就是触发滚轮事件时滚轮的高度
}

二、Jquery通过$(window).scroll()监听

$(window).scroll(function(){//为了保证兼容性,这里取两个值,哪个有值取哪一个var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//scrollTop就是触发滚轮事件时滚轮的高度});

监听到了滚轮事件,就可以实时地获取到滚轮的高度,通过判断滚轮高度等等一些流程控制,可以实现一些基于滚轮的特效,如:滚轮到底时异步加载数据、滚轮高度为0时头部固定而到一定高度时头部fixed浮动等等一些特效

以上这篇两种js监听滚轮事件的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 #Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 #Javascript
AngularJS在IE8的不支持的解决方法
May 13 #Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 #Javascript
JavaScript String 对象常用方法详解
May 13 #Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 #Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 #Javascript
You might like
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
node.js入门教程
2014/06/01 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python中replace方法实例分析
2014/08/20 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
spyder常用快捷键(分享)
2017/07/19 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python3.7 的新特性详解
2019/07/25 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
Java面试笔试题大全
2016/11/23 面试题
元旦晚会邀请函
2014/01/27 职场文书
小区推广策划方案
2014/06/06 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
养成教育主题班会
2015/08/13 职场文书
公证书
2019/04/17 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android