vue2： 横行滚动

Vue中如何用鼠标滑轮进行横向滑动不显示滚动条

1.页面 2.在vue methods方法中定义

 //父盒子
      <div class="navHistory gzparkNavWarp" @mousewheel="handleMouseWheel">
      //子盒子
        <el-tag
          class="gzparkNav"
          v-for="tag in tags"
          :key="tag.name"
          closable
          :type="tag.type"
          :disable-transitions="true"
          @close="handleClose(tag)"
        >
           tag.name 
        </el-tag>
      </div>

methods: 
    //滑动鼠标滚轮实现横向滚动
    handleMouseWheel(e) 
      const scrollLeft = document.querySelector(".gzparkNavWarp").scrollLeft;
      const offsetWidth = document.querySelector(".gzparkNavWarp").offsetWidth;
      const scrollWidth = document.querySelector(".gzparkNavWarp").scrollWidth;
      if (e.wheelDelta < 0 && scrollLeft + offsetWidth < scrollWidth) 
        document.querySelector(".gzparkNavWarp").scrollLeft =
          document.querySelector(".gzparkNavWarp").scrollLeft + 100;
       else if (e.wheelDelta > 0 && scrollLeft > 0) 
        document.querySelector(".gzparkNavWarp").scrollLeft =
          document.querySelector(".gzparkNavWarp").scrollLeft - 100;
      
    ,
  
<style lang="scss" scoped>
.navHistory //父盒子
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  overflow: hidden;//清除滚动条
  .gzparkNav //子盒子
    margin: 0 10px;
  

</style>

一.鼠标拖拽滚动

<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")
      var flag; // 鼠标按下
      var downX; // 鼠标点击的x下标
      var scrollLeft; // 当前元素滚动条的偏移量
      nav.addEventListener("mousedown", function (event) {
      flag = true;
      downX = event.clientX; // 获取到点击的x下标
      scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
      });
      nav.addEventListener("mousemove", function (event) {
      if (flag) { // 判断是否是鼠标按下滚动元素区域
      var moveX = event.clientX; // 获取移动的x轴
      var scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
      this.scrollLeft = scrollLeft - scrollX // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
      console.log(scrollX)
      }
      });
      // 鼠标抬起停止拖动
      nav.addEventListener("mouseup", function () {
      flag = false;
      });
      // 鼠标离开元素停止拖动
      nav.addEventListener("mouseleave", function (event) {
      flag = false;
      });
    },
  }
};


 #nav{
      overflow-x: auto;
      overflow-y: hidden;
    }

二.鼠标滚轮滚动

<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', 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;
        }
        // 对需要滚动的元素进行滚动操作
        nav.scrollLeft += step;
      }
    },

    #nav{
      overflow-x: auto;
      overflow-y: hidden;
    }