第一種，按住鼠標(biāo)拖拽滾動(dòng)
以下代碼項(xiàng)目中直接使用即可，此種方法是通過鼠標(biāo)拖拽進(jìn)行滾動(dòng)，滑動(dòng)滾輪無效果。
當(dāng)然快捷鍵，shift+鼠標(biāo)滾輪可以控制橫向滾動(dòng)，對(duì)用戶來說體驗(yàn)不友好。

<div class="tab-list id="nav">
    <div class="tab-item" v-for="(item,index) in list" :key=""> </div>
</div>

mounted() {
    this.scrollInit();
  },
methods: {
     // 初始化與綁定監(jiān)聽事件方法
    scrollInit() {
      // 獲取要綁定事件的元素
      const nav = document.getElementById("nav")
      var flag; // 鼠標(biāo)按下
      var downX; // 鼠標(biāo)點(diǎn)擊的x下標(biāo)
      var scrollLeft; // 當(dāng)前元素滾動(dòng)條的偏移量
      nav.addEventListener("mousedown", function (event) {
      flag = true;
      downX = event.clientX; // 獲取到點(diǎn)擊的x下標(biāo)
      scrollLeft = this.scrollLeft; // 獲取當(dāng)前元素滾動(dòng)條的偏移量
      });
      nav.addEventListener("mousemove", function (event) {
      if (flag) { // 判斷是否是鼠標(biāo)按下滾動(dòng)元素區(qū)域
      var moveX = event.clientX; // 獲取移動(dòng)的x軸
      var scrollX = moveX - downX; // 當(dāng)前移動(dòng)的x軸下標(biāo)減去剛點(diǎn)擊下去的x軸下標(biāo)得到鼠標(biāo)滑動(dòng)距離
      this.scrollLeft = scrollLeft - scrollX // 鼠標(biāo)按下的滾動(dòng)條偏移量減去當(dāng)前鼠標(biāo)的滑動(dòng)距離
      console.log(scrollX)
      }
      });
      // 鼠標(biāo)抬起停止拖動(dòng)
      nav.addEventListener("mouseup", function () {
      flag = false;
      });
      // 鼠標(biāo)離開元素停止拖動(dòng)
      nav.addEventListener("mouseleave", function (event) {
      flag = false;
      });
    },
  }
};

css代碼

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

第二種方法是通過鼠標(biāo)的滾輪進(jìn)行滾動(dòng)

<div class="tab-list id="nav">
    <div class="tab-item" v-for="(item,index) in list" :key=""> </div>
</div>

mounted() {
    this.scrollInit();
  },
methods: {
     // 初始化與綁定監(jiān)聽事件方法
    scrollInit() {
      // 獲取要綁定事件的元素
      const nav = document.getElementById("nav")
      // document.addEventListener('DOMMouseScroll', handler, false)
      // 添加滾輪滾動(dòng)監(jiān)聽事件，一般是用下面的方法，上面的是火狐的寫法
      nav.addEventListener('mousewheel', handler, false)
      // 滾動(dòng)事件的出來函數(shù)
      function handler(event) {
        // 獲取滾動(dòng)方向
        const detail = event.wheelDelta || event.detail;
        // 定義滾動(dòng)方向，其實(shí)也可以在賦值的時(shí)候?qū)?/span>
        const moveForwardStep = 1;
        const moveBackStep = -1;
        // 定義滾動(dòng)距離
        let step = 0;
        // 判斷滾動(dòng)方向,這里的100可以改，代表滾動(dòng)幅度，也就是說滾動(dòng)幅度是自定義的
        if (detail < 0) {
          step = moveForwardStep * 100;
        } else {
          step = moveBackStep * 100;
        }
        // 對(duì)需要滾動(dòng)的元素進(jìn)行滾動(dòng)操作
        nav.scrollLeft += step;
      }
    },

css代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-507379.html

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

到了這里，關(guān)于vue實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)拖拽橫向滾動(dòng)和 鼠標(biāo)滾輪橫向滾動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！