HTML编程之滚轮滑动监听效果的实现

在前端页面制作过程中,我们经常会发现有时候某些动作需要滚动滑轮来实现,那么对于初学者来说可能不明白是如何实现的,对于这个问题,下面就来跟大家分析一下,如何用滚轮滑动监听效果的实现。

源代码如下:

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

现在大家知道是如何控制实现的吧,如果还是有不明白的地方,或者不知道哪里出错了,都是可以留言咨询我们来寻求帮助和解答的。
本文由专业的郑州app开发公司燚轩科技整理发布,原创不易,如需转载请注明出处。

猜你喜欢

转载自blog.51cto.com/13686158/2307495