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

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

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js监听滚轮事件
jquery监听鼠标滚轮、js监听鼠标滚轮事件、监听滚轮事件、js监听滚轮事件、jquery监听滚轮事件,以便于您获取更多的相关知识。

时间: 2024-11-01 18:09:03

两种js监听滚轮事件的实现方法_javascript技巧的相关文章

js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法_javascript技巧

本文实例讲述了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法.分享给大家供大家参考.具体如下: //控制logo的显示位置 Begin window.addEventListener("resize", function () { // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度) changeLogoPosition(); }, false); changeLogoPosition(); function changeLogoPosition() { var conten

js实时监听文本框状态的方法_javascript技巧

复制代码 代码如下: <div id="msg"></div> <input type="text" name="txt" id="txt"/> <script> //当状态改变的时候执行的函数 function handle() { document.getElementById('msg').innerHTML = document.getElementById('txt')

js监听鼠标事件控制textarea输入字符串的个数_javascript技巧

[Html代码] <table> <tr> <td width="150">短信内容:</td> <td> <textarea name="message" cols="96" rows="5" onKeyDown="textCounter(message,remLen,65);" onKeyUp="textCounter(mess

bootstrap监听滚动实现头部跟随滚动_javascript技巧

本文实例为大家分享了bootstrap监听滚动头部跟随滚动的实现方法,供大家参考,具体内容如下 实现案例 <body data-spy="scroll" data-target="#bs-example-navbar-collapse-1"> <div id='menu_wrap'> <div class='menu'> <nav class="navbar navbar-default" role=&q

js计算系统当前日期是星期几的方法_javascript技巧

本文实例为大家分享了4种js计算系统当前日期是星期几的方法,供大家参考,具体内容如下 方法一: // 计算系统当前是星期几 var str = "今天是星期" + "日一二三四五六".charat(new date().getday()); 方法二: var a = new array("日", "一", "二", "三", "四", "五", &

JS滚轮事件onmousewheel使用介绍_javascript技巧

典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件.在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 "mousewheel" 事件.滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派,杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:"DO

js 动态给元素添加、移除事件的实现方法_javascript技巧

最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件 /addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,functio

完美实现八种js焦点轮播图(下篇)_javascript技巧

继续上一篇的学习完美实现八种js焦点轮播图(上篇),供大家参考,具体内容如下 5.定时上下无缝滚动 思路: 1.思路1: 将ul复制一份,但滚动一半距离重新归位:(大型网站性能略低): 2.思路2: 通过相对定位,将第一个li移动到最后,再将ul和Li归位. window.onload=function(){ var oBox=document.getElementById('box'); var oUl=document.getElementById('ul'); var aLi_u=oUl.

JavaScript焦点事件、鼠标事件和滚轮事件使用详解_javascript技巧

焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin: DOMFocusOut:同HTML事件blur,于DOM3遭废弃,选用focusout: focus:元素获得焦点,不回冒泡: focusin:获得焦点,与HTML事件focus等价,但会冒泡: focusout:失去焦点,与HTML事件b