两种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 相关文章推荐
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
js在HTML的三种引用方式详解
Aug 29 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
在js中修改html body的样式
Nov 11 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/04/25 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
JS实现鼠标移动拖尾
2020/12/27 Javascript
python中字符串类型json操作的注意事项
2017/05/02 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python实现中文文本分句的例子
2019/07/15 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python3 使用traceback定位异常实例
2020/03/09 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
酒后驾驶检讨书
2014/01/27 职场文书
大学生求职信
2014/06/17 职场文书
销售活动策划方案
2014/08/26 职场文书
淮海战役观后感
2015/06/11 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang