两种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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 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聊天室技术
2006/10/09 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
Android笔试题总结
2014/11/29 面试题
小学二年级评语
2014/04/21 职场文书
勾股定理课后反思
2014/04/26 职场文书
大学社团计划书
2014/05/01 职场文书
项目工作说明书
2014/07/29 职场文书
二人合伙经营协议书
2014/09/13 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
教导处教学工作总结
2015/08/12 职场文书
2015年教师节广播稿
2015/08/19 职场文书