幅度_vue横向滚动条通过鼠标滚动控制

篇首语：本文由编程笔记#小编为大家整理，主要介绍了vue横向滚动条通过鼠标滚动控制相关的知识，希望对你有一定的参考价值。

vue横向滚动条通过鼠标滚动控制

• vue横向滚动条通过鼠标滚动控制

<template>
<ul class&＃61;"scrollX">
<li v-for&＃61;"(item, i) in 20">item</li>
</ul>
</template>
<script>
export default
name: "Test01",
methods:
// 初始化与绑定监听事件方法
scrollInit()
// 获取要绑定事件的元素
const scrollDiv &＃61; document.getElementsByClassName("scrollX")[0];
// document.addEventListener(&＃39;DOMMouseScroll&＃39;, handler, false)
// 添加滚轮滚动监听事件&＃xff0c;一般是用下面的方法&＃xff0c;上面的是火狐的写法
scrollDiv.addEventListener(&＃39;mousewheel&＃39;, handler, false)
// 滚动事件的出来函数
function handler(event)
// 获取滚动方向
const detail &＃61; event.wheelDelta || event.detail;
// 定义滚动方向&＃xff0c;其实也可以在赋值的时候写
const moveForwardStep &＃61; 1;
const moveBackStep &＃61; -1;
// 定义滚动距离
let step &＃61; 0;
// 判断滚动方向,这里的100可以改&＃xff0c;代表滚动幅度&＃xff0c;也就是说滚动幅度是自定义的
if (detail < 0)
step &＃61; moveForwardStep * 100;
else
step &＃61; moveBackStep * 100;

// 对需要滚动的元素进行滚动操作
scrollDiv.scrollLeft &＃43;&＃61; step;

,
,
mounted()
this.scrollInit();


</script>
<style lang&＃61;"scss">
.scrollX
width: 800px;
display: flex;
overflow-x: auto;
overflow-y: hidden;
li
flex-shrink: 0;
width: 100px;
line-height: 40px;
background-color: #ccc;
margin: 10px;
text-align: center;


</style>


结果