两种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转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 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下MYSQL limit的优化
2008/01/10 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
解析Python中的二进制位运算符
2015/05/13 Python
python paramiko模块学习分享
2017/08/23 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
安全生产目标管理责任书
2014/07/25 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
关于召开会议的通知
2015/04/15 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
微信小程序调用python模型
2022/04/21 Python