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

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

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

Dome

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;

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

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

html 页面自动滚动,js监听html页面的上下滚动事件方法相关推荐

js监听html页面大小变化,JS监听窗口变化实时获取浏览器窗口大小
原理:通过监听窗口的变化来动态获取窗口大小用到的方法:addEventListener() 监听window的resize事件 js代码: // 定义事件侦听器函数 function watchWi ...
js监听html页面大小变化,js实时获取浏览器窗口大小
js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现.该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window ...
js监听手机端的touch滑动事件
实现原理:获取触摸首尾2点的坐标,Math.atan2获得2点连成的直线与x轴正方向的夹角,从而得到滑动的方向! 原理图: <!doctype html> <html> < ...
js监听苹果手机自带按钮返回事件
$(function(){pushHistory();var bool=false;setTimeout(function(){ bool=true; },1500);window.addEventL ...
js监听回车触发按钮点击事件
document.onkeyup = function (e) {var event = e || window.event;var key = event.which || event.keyCod ...
微信小游戏中监听一个按钮的点击事件方法
首先肯定是看API文档,如图所示但初学者特别是自学者看的一脸迷惘不知所措,又没有实例.所有我来写一下我的做法,有什么错误请大家指出一起交流一下哈! 直接看代码清楚点 let points = [{x ...
java计算器监听放大缩小,js监听页面放大缩小
demo body[zoom='scale']:before{ content: '您的网页处于缩放状态,请按 Ctrl+0 恢复到浏览器默认大小'; z-index: 9999; position: ...
js监听页面或元素scroll事件，滚动到底部或顶部
基本原理: 1.滚动到底部元素的滚动距离 + 元素的可视距离 == 元素的滚动条总距离2.滚动到顶部元素的滚动距离 == 0 监听页面滚动 <!DOCTYPE html> <ht ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...

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

html 页面自动滚动,js监听html页面的上下滚动事件方法相关推荐

最新文章

热门文章