思路:使用js来实现监听鼠标滚轮滚动监听事件
<div id="box" class="box">
<div></div>
</div>
mounted() {
this.scrollInit()
},
beforeDestroy(){
if (navigator.userAgent.indexOf('Firefox') >= 0) {
this.scrollDiv.removeEventListener('DOMMouseScroll', this.scrollHandler, false)
} else {
this.scrollDiv.removeEventListener('mousewheel', this.scrollHandler, false)
}
},
methods: {
scrollInit() {
// 获取要绑定事件的元素
this.scrollDiv = document.getElementById("box");
if (navigator.userAgent.indexOf('Firefox') >= 0) {
// 火狐写法 添加滚轮滚动监听事件
this.scrollDiv.addEventListener('DOMMouseScroll', this.scrollHandler, false)
} else {
// 非火狐 添加滚轮滚动监听事件
this.scrollDiv.addEventListener('mousewheel', this.scrollHandler, false)
}
},
scrollHandler(event){
if(event.preventDefault)
{
event.preventDefault();
}else{
event.returnValue = false;
}
// 获取滚动方向
const detail = event.wheelDelta || event.detail;
// 定义滚动方向,其实也可以在赋值的时候写
const moveForwardStep = 1;
const moveBackStep = -1;
// 定义滚动距离
let step = 0;
// 判断滚动方向,这里的100可以改,代表滚动幅度,也就是说滚动幅度是自定义的
if (navigator.userAgent.indexOf('Firefox') >= 0) {
// 火狐浏览器和谷歌的值正好相反
if (detail > 0) {
step = moveForwardStep * 100;
} else {
step = moveBackStep * 100;
}
}else{
if (detail < 0) {
step = moveForwardStep * 100;
} else {
step = moveBackStep * 100;
}
}
// 对需要滚动的元素进行滚动操作
this.scrollDiv.scrollLeft += step;
},
.box{
width: 595px;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
P.s.:浏览记录清空了,这个参考文章找不到了。。。