两种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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
Aug 02 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
利用Python演示数型数据结构的教程
2015/04/03 Python
Python的语言类型(详解)
2017/06/24 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
辩论赛主持词
2014/03/18 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
python可视化大屏库big_screen示例详解
2021/11/23 Python