js监听html页面的上下滚动事件方法
更新时间：2018年09月11日 15:03:39 作者：--LIANG--
今天小编就为大家分享一篇js监听html页面的上下滚动事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近在一个项目中，在写前端页面的时候，想像以前做Android时在页面时刻监听上下滚动的事件，查找资料发现由鼠标或类似用户动作触发的事件有以下图示：
不多说了，直接上代码了，经过测试可以使用：
<!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页面的上下滚动事件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Typescript高级类型Record,Partial,Readonly详解
这篇文章主要介绍了Typescript高级类型Record,Partial,Readonly等介绍,keyof将一个类型的属性名全部提取出来当做联合类型，本文通过实例代码给大家详细讲解需要的朋友可以参考下2022-11-11
function.bind()方法默认IE8是不支持的，下面有个小技巧可完美解决这个问题，为此疑惑的朋友可以看看2014-10-10
JavaScript.The.Good.Parts阅读笔记（二）作用域&闭包&减缓全局空间污染
块级作用域: 大多数使用c语言语法的语言都有块级作用域，而JavaScript没有块级作用域。2010-11-11
躲避这些会改变原数组JavaScript数组方法让开发流畅无阻
JavaScript中有些数组的操作方法并不符合我们预期，容易导致想象不到的结果，因此，为避免这种情况的发生，本文将介绍哪些原生数组方法能改变原数组以及我对于如何更好地使用数组方法的建议2023-05-05
这篇文章主要介绍了微信小程序开发中实现事件传参与数据同步的详细流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这个脚本是网上的代码修改的，兼容各主流浏览器，优化页面异步加载的文字的检索提示框定位，根据选择文字位置与屏幕尺寸计算检索提示框定位。2009-09-09
JavaScript中关于for循环删除数组元素内容时出现的问题
昨天在用for循环进行数组去重的时候出现的问题小结，怎么解决这个问题呢，今天小编通过本文给大家讲解下js循环删除数组元素的方法，一起看看吧2016-11-11
这篇文章主要介绍了JavaScript+HTML5实现的日期比较功能,涉及javascript结合HTML5针对日期的转换与运算相关操作技巧,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了网站基于flash实现的Banner图切换效果代码,是基于Flash与js实现的banner图片自动定时切换特效,并附有完整的示例源码,非常具有实用价值,需要的朋友可以参考下2014-10-10
这篇文章主要为大家详细介绍了JavaScript中常见的数据格式化方式,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下2023-12-12
最新评论