两种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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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排序算法的复习和总结
2012/02/15 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
javascript new一个对象的实质
2010/01/07 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Django 静态文件配置过程详解
2019/07/23 Python
基于Python中的yield表达式介绍
2019/11/19 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
电子专业毕业生自我鉴定
2014/01/22 职场文书
工会主席事迹材料
2014/06/03 职场文书
处罚决定书范文
2015/06/24 职场文书