两种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 Jcrop插件实现图片选取功能
Nov 23 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
JavaScript 数组去重详解
Sep 15 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP中常用的魔术方法
2017/04/28 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
简述python Scrapy框架
2020/08/17 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
施工协议书范本
2014/04/22 职场文书
英语复习计划
2015/01/19 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
自信主题班会
2015/08/14 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
深入理解python多线程编程
2021/04/18 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript