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

Posted 2022-05-21 码上暴富

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

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

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

<template>
  <ul class="scrollX">
    <li v-for="(item, i) in 20">item</li>
  </ul>
</template>

<script>
export default 
  name: "Test01",
  methods: 
    // 初始化与绑定监听事件方法
    scrollInit() 
      // 获取要绑定事件的元素
      const scrollDiv = document.getElementsByClassName("scrollX")[0];
      // document.addEventListener('DOMMouseScroll', handler, false)
      // 添加滚轮滚动监听事件，一般是用下面的方法，上面的是火狐的写法
      scrollDiv.addEventListener('mousewheel', handler, false)
      // 滚动事件的出来函数
      function handler(event) 
        // 获取滚动方向
        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;
        
        // 对需要滚动的元素进行滚动操作
        scrollDiv.scrollLeft += step;
      
    ,
  ,
  mounted() 
    this.scrollInit();
  

</script>

<style lang="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>

结果