vue里面关于实现鼠标滚轮滚动横向滚动条滚动案例

最新推荐文章于 2024-07-10 10:34:25 发布

囿于江湖

最新推荐文章于 2024-07-10 10:34:25 发布

阅读量1.5k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/dongheng123/article/details/121773480

版权

博客内容探讨了鼠标滚轮事件在div元素上的局部应用，通过监听`mousewheel`事件，实现水平滚动条的定制滚动。代码示例中展示了如何根据滚轮上滑和下滑调整`.gzparkNavWarp`的滚动位置，从而实现平滑滚动效果。

摘要由CSDN通过智能技术生成

起初还以为鼠标滚轮事件是全局没想到啊竟然有局部得这里是我无知了！！！

div class="gzparkNavWarp" @mousewheel="handleMouseWheel">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          class="gzparkNav"
          @select="handleSelect"
        >```
    

    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
      }
    },
   

![在这里插入图片描述](https://img-blog.csdnimg.cn/d379358411c49259c9b8806b801b60b.png)