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

Posted 2022-11-25 龖龖龖

1.页面

      //父盒子
      <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>

2.在vue methods方法中定义

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>