mousewheel(event) :只有Firefox不支持的滚轮滚动事件
DOMMouseScroll(event): 只有Firefox支持的滚轮滚动事件
思路: 判断滚轮滚动方向,向上滚动与向下滚动分别实现向上与向下的逻辑偏移。整体比较简单。
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 {
// 在元素内
}
}