两种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 相关文章推荐
jquery 页面全选框实践代码
Apr 02 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
javascript之Partial Application学习
Jan 10 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
微信小程序后端实现授权登录
Feb 24 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/23 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python Queue模块详解
2014/11/30 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
对pandas处理json数据的方法详解
2019/02/08 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
python实现控制台输出彩色字体
2020/04/05 Python
python mock测试的示例
2020/10/19 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
标准单位租车协议书
2014/09/23 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
德生2P3收音机开箱评测
2022/04/30 无线电
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android