一、滚轮事件介绍
滚轮事件是指鼠标滚轮被滚动时所触发的事件。在页面上，滚轮事件可以用来实现一些交互效果，如上下滚动网页内容、缩放图片等。
在JS中可以通过addEventListener方法来监听滚轮事件，代码如下：
let scrollFunc = function(e){
e = e || window.event;
if (e.wheelDelta){//判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) {
//当滑轮向上滚动时
}
if (e.wheelDelta 0) {
//当滑轮向下滚动时
}
if (e.detail< 0) {
//当滑轮向上滚动时
}
}
}
//给页面绑定滑轮滚动事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
二、滚轮滚动控制网页内容
利用滚轮事件控制网页内容滚动是比较常见的交互效果。可以通过监听滚轮事件，判断滚轮滚动的方向，然后对网页内容进行相应的滚动。
实现方法是获取页面的scrollTop属性，然后通过改变scrollTop的值来控制网页滚动。例如，当滑轮向下滚动时，将scrollTop的值加上一个固定值，当滑轮向上滚动时，将scrollTop的值减去一个固定值。
代码示例：
let scrollStep = 50;
let scrollDelta = 0;
function scrollPage(delta){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
scrollTop -= delta > 0 ? scrollStep : -scrollStep;
if(scrollTop < 0) scrollTop = 0;
document.documentElement.scrollTop = document.body.scrollTop = scrollTop;
}
let scrollFunc = function(e){
e = e || window.event;
if (e.wheelDelta){
scrollDelta = e.wheelDelta;
} else if (e.detail){
scrollDelta = e.detail * -1;
}
if (scrollDelta){
scrollPage(scrollDelta);
}
e.preventDefault && e.preventDefault();
e.returnValue = false;
}
if (document.addEventListener){
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
window.onmousewheel = document.onmousewheel = scrollFunc;
三、滚轮控制动画效果
除了控制网页滚动，滚轮事件还可以用来实现一些动画效果。例如，当用户滑动滚轮时，图片可以做出相应的缩放或移动效果。
实现方法是通过CSS3的transform属性来控制元素的缩放、旋转等效果，同时通过监听滚轮事件，动态改变transform属性的值达到动画效果的实现。
代码示例：
let scale = 1;
let scaleStep = 0.1;
function zoomPage(delta){
scale += delta > 0 ? -scaleStep : scaleStep;
if(scale < 0.5) scale = 0.5;
document.body.style.transform = 'scale(' + scale + ')';
}
let scrollFunc = function(e){
e = e || window.event;
let delta = e.wheelDelta || e.detail * -1;
if (delta){
zoomPage(delta);
}
e.preventDefault && e.preventDefault();
e.returnValue = false;
}
if (document.addEventListener){
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
window.onmousewheel = document.onmousewheel = scrollFunc;
四、总结
通过对滚轮事件的使用，可以实现一些很有创意的交互效果，让用户的体验更加流畅。在实际开发过程中，开发人员需要根据具体需求来选择对应的实现方式，并且需要注意兼容性的处理。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/152479.html
微信扫一扫 
支付宝扫一扫 