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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
百度地图自定义控件分享
Mar 04 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
JS定义类的六种方式详解
May 12 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
JavaScript实现随机点名器
Mar 25 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/03/27 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python生成式的send()方法(详解)
2017/05/08 Python
Python模块搜索路径代码详解
2018/01/29 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
体育教师自荐信范文
2013/12/16 职场文书
学习委员自我鉴定
2014/01/13 职场文书
校园之星获奖感言
2014/01/29 职场文书
阿德的梦教学反思
2014/02/06 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书