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

Posted 龖龖龖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中如何用鼠标滑轮进行横向滑动不显示滚动条相关的知识,希望对你有一定的参考价值。

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>

以上是关于Vue中如何用鼠标滑轮进行横向滑动不显示滚动条的主要内容,如果未能解决你的问题,请参考以下文章

“css中滑动背景如何让盒子不滑动”?

css如何在页面内出现滚动条的地方禁止鼠标滑轮滚动

为啥鼠标滑轮可以滚动div里面的内容,手机端手指滑动就不能滑动

word滚动鼠标滑轮会放大缩小怎么办

鼠标不动,滚动条自动滚动,页面抖动

HTML横向滚动条和文本超出显示三个小圆点