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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
js自定义input文件上传样式
Oct 26 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
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创建多级目录代码
2008/06/05 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
js倒计时显示实例
2016/12/11 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
python实现八大排序算法(2)
2017/09/14 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
django中嵌套的try-except实例
2020/05/21 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
物业保安员岗位职责
2014/03/14 职场文书
怎样写离婚协议书
2014/09/10 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
博士生专家推荐信
2015/03/25 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js