两种js监听滚轮事件的实现方法

 更新时间:2016年05月13日 17:21:34   投稿:jingxian  
下面小编就为大家带来一篇两种js监听滚轮事件的实现方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前段时间在写前端的时候,需要监听浏览器的滚轮事件

网上查了一下,找到两种监听滚轮事件的方法:

一、原生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监听滚轮事件的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 弥补localStorage容量缺陷方法详解

    弥补localStorage容量缺陷方法详解

    这篇文章主要为大家介绍了弥补localStorage容量缺陷的方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • csdn 博客中实现运行代码功能实现

    csdn 博客中实现运行代码功能实现

    有时候因为csdn的博客经常处理一些字符,导致代码很多情况下,都不能正常运行,给大家的阅读带来了麻烦,下面是脚本之家编辑简单的整理下。
    2009-08-08
  • 基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    打地鼠小游戏大家都喜欢玩,本文是以html编写的,并且使用HBulider软件进行编写的,下面通过本文给大家分享基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解,需要的朋友参考下吧
    2017-11-11
  • JS验证字符串功能

    JS验证字符串功能

    这篇文章主要介绍了JS验证字符串功能实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • bootstrap模态框远程示例代码分享

    bootstrap模态框远程示例代码分享

    这篇文章主要为大家详细介绍了bootstrap模态框远程示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Bootstrap表单使用方法详解

    Bootstrap表单使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap表单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • javascript实现图片延迟加载方法汇总(三种方法)

    javascript实现图片延迟加载方法汇总(三种方法)

    看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,跟着小编一起学习javascript实现图片延迟加载吧
    2015-08-08
  • ES6 Promise对象的含义和基本用法分析

    ES6 Promise对象的含义和基本用法分析

    这篇文章主要介绍了ES6 Promise对象的含义和基本用法,结合实例形式分析了Promise的含义、功能、基本用法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • js如何查找json数据中的最大值和最小值方法

    js如何查找json数据中的最大值和最小值方法

    这篇文章主要介绍了js如何查找json数据中的最大值和最小值方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • ES6新数据结构Map功能与用法示例

    ES6新数据结构Map功能与用法示例

    这篇文章主要介绍了ES6新数据结构Map功能与用法,结合实例形式分析了Map的功能、使用方法及相关注意事项,需要的朋友可以参考下
    2017-03-03

最新评论