关于鼠标滚动滑轮事件

最新推荐文章于 2024-07-30 03:35:30 发布

转载最新推荐文章于 2024-07-30 03:35:30 发布 · 628 阅读

js事件专栏收录该内容

4 篇文章

订阅专栏

总结一下滑动鼠标滚轮，可以左右切换图片。在网上找的资料，自己进行修改逻辑，完成。

var scrollFunc = function (e) {

var direct = 0;

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(" 滑轮向下滚动");

}

ScrollText(direct);

}

//给页面绑定滑轮滚动事件

if (document.addEventListener) {

document.addEventListener('DOMMouseScroll', scrollFunc, false);

}

//滚动滑轮触发scrollFunc方法

window.onmousewheel = document.onmousewheel = scrollFunc;

</script>

上面这段代码可以实现最基本的滑轮滚动事件，实现效果的同时滚动条也在滚动，下面代码要做的就是组织实现效果的时候滚动条滚动

var scrollFunc = function (e) {

var direct = 0;

	e = e || window.event;
	if (e.stopPropagation) e.stopPropagation();
	else e.cancelBubble = true;
	if (e.preventDefault) e.preventDefault();
	else e.returnValue = false;

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(" 滑轮向下滚动");

}

ScrollText(direct);

}

//给页面绑定滑轮滚动事件

if (document.addEventListener) {

document.addEventListener('DOMMouseScroll', scrollFunc, false);

}

//滚动滑轮触发scrollFunc方法获取id是效果的作用域，指效果只在这一块区域有效，超过此区域的不分是滚动条向下滚动

document.getElementById("op_computer_bg").onmousewheel = document.getElementById("op_computer_bg").onmousewheel = scrollFunc;

</script>