mousewheel(event): Only the wheel scrolling event that Firefox does not support
DOMMouseScroll(event): Only the wheel scrolling event that Firefox supports
Idea: Determine the rolling direction of the scroll wheel, scroll up and scroll down to achieve upward and downward logical offsets respectively. Overall it is relatively simple.
rollLeftContent(e) {
// console.log(e);
let x = e.pageX;
let y = e.pageY;
let img = this.$refs.img;
//我需要的是图片滚动,放到图片上不发生滚动,所以剔除了图片内部滚动事件
let rect = img.getBoundingClientRect()
let y1 = rect.top
let y2 = y1 + rect.height
let x1 = rect.left
let x2 = x1 + rect.width
if (x < x1 || x > x2 || y < y1 || y > y2) {
//不在元素内
//鼠标向下滚动
if(e.wheelDelta < 0){
let timeId;
// 页面滚动停止100毫秒后才会执行下面的函数。
clearTimeout(timeId);
timeId = setTimeout(() => {
this.scrollToTop();
}, 100);
//鼠标向上滚动
}else if(e.wheelDelta > 0){
}
} else {
// 在元素内
}
}