两种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 option location 页面跳转实现代码
Dec 27 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
浅谈JavaScript作用域
Dec 06 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函数import_request_variables()用法分析
2016/04/02 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
React如何避免重渲染
2018/04/10 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Python实现数值积分方式
2019/11/20 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
python3 kubernetes api的使用示例
2021/01/12 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
企业宗旨标语
2014/06/10 职场文书
激励口号大全
2014/06/17 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
地心历险记观后感
2015/06/15 职场文书