两种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中变量相关的细节分析
Aug 13 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
原生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调用三种数据库的方法(3)
2006/10/09 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Vue异步加载about组件
2017/10/31 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
python实现解数独程序代码
2017/04/12 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python zip()函数用法实例分析
2018/03/17 Python
实用自动化运维Python脚本分享
2018/06/04 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
python中正则表达式与模式匹配
2019/05/07 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
PyTorch中permute的用法详解
2019/12/30 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
体育课课后反思
2014/04/24 职场文书
伏羲庙导游词
2015/02/09 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书