Coloque el mouse sobre él y desplace la rueda del mouse para deslizar el contenido de la etiqueta hacia la izquierda y hacia la derecha.
código en plantilla
<div class="tab-list" id="nav">
<div class="tab-item" v-for="(item,index) in list" :key=""> </div>
</div>
mounted() {
this.scrollInit(); // 初始化滚动事件
},
methods: {
// 初始化与绑定监听事件方法
scrollInit() {
// 获取要绑定事件的元素
const nav = document.getElementById("nav")
// document.addEventListener('DOMMouseScroll', handler, false)
// 添加滚轮滚动监听事件,一般是用下面的方法,上面的是火狐的写法
nav.addEventListener('mousewheel', this.handler, false)
},
// 滚动事件的出来函数
handler(event) {
// 获取要绑定事件的元素
const nav = document.getElementById("nav")
// 获取滚动方向
const detail = event.wheelDelta || event.detail;
// 定义滚动方向,其实也可以在赋值的时候写
const moveForwardStep = 1;
const moveBackStep = -1;
// 定义滚动距离
let step = 0;
// 判断滚动方向,这里的100可以改,代表滚动幅度,也就是说滚动幅度是自定义的
if (detail < 0) {
step = moveForwardStep * 100;
} else {
step = moveBackStep * 100;
}
// 对需要滚动的元素进行滚动操作
nav.scrollLeft += step;
},
}
código css:
.tab-list{
display: flex;
align-items: center;
overflow-x: auto;
transition:all 500ms linear; // 滑动动画
}
.tab-list::-webkit-scrollbar {
height: 0; // 隐藏滚动条
}