js监听html页面的上下滚动事件方法


Posted in Javascript onSeptember 11, 2018

最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示:

js监听html页面的上下滚动事件方法

不多说了,直接上代码了,经过测试可以使用:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Dome</title>
  <script type="text/javascript"> 

   function scroll(){
    //console.log("打印log日志");实时看下效果
    console.log("开始滚动!");
   }

   var scrollFunc = function (e) { 
    e = e || window.event; 
    if (e.wheelDelta) { //第一步:先判断浏览器IE,谷歌滑轮事件    
     if (e.wheelDelta > 0) { //当滑轮向上滚动时 
      console.log("滑轮向上滚动"); 
     } 
     if (e.wheelDelta < 0) { //当滑轮向下滚动时 
      console.log("滑轮向下滚动"); 
     } 
    } else if (e.detail) { //Firefox滑轮事件 
     if (e.detail> 0) { //当滑轮向上滚动时 
      console.log("滑轮向上滚动"); 
     } 
     if (e.detail< 0) { //当滑轮向下滚动时 
      console.log("滑轮向下滚动"); 
     } 
    } 
   }
   //给页面绑定滑轮滚动事件 
   if (document.addEventListener) {//firefox 
    document.addEventListener('DOMMouseScroll', scrollFunc, false); 
   } 
   //滚动滑轮触发scrollFunc方法 //ie 谷歌 
   window.onmousewheel = document.onmousewheel = scrollFunc;


  </script> 

 </head>
 <body onscroll="scroll()">
  <div style="height: 2000px;background-color: aqua;"></div>
 </body>
</html>

如果有没有使用过console.log(“”)的,我这里截下图看下吧(谷歌浏览器):

js监听html页面的上下滚动事件方法

以上这篇js监听html页面的上下滚动事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript计算时间差的函数分享
Jul 04 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
js选项卡的制作方法
Jan 23 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
js实现验证码干扰(动态)
Feb 23 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 #Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 #Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 #Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 #Javascript
Webpack之tree-starking 解析
Sep 11 #Javascript
node.js之基础加密算法模块crypto详解
Sep 11 #Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 #Javascript
You might like
PHP - Html Transfer Code
2006/10/09 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
Python深入学习之闭包
2014/08/31 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python生成器以及应用实例解析
2018/02/08 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
物业管理公司实习生自我鉴定
2013/09/19 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
详解Vue slot插槽
2021/11/20 Vue.js
Python+tkinter实现高清图片保存
2022/03/13 Python