两种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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
原生JS实现轮播图效果
Oct 12 Javascript
微信小程序一周时间表功能实现
Oct 17 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交互使用详解
2006/10/09 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
Python素数检测实例分析
2015/06/15 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
爱情检讨书大全
2014/01/21 职场文书
公司会计岗位职责
2014/02/13 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
培训班通知
2015/04/25 职场文书
入党团支部推荐意见
2015/06/02 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS