vue横向滚动添加滚动、拖拽

最新推荐文章于 2024-07-09 21:18:14 发布

二狗子的翠花

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量46

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Pure_White520/article/details/140290838

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 <div ref="navbar" class="out-box" @wheel="handleScroll($event)" @mousedown="handleMoseDown($event)"
    @mouseup="handleMouseUp($event)" @mouseleave="handleMouseUp($event)" @mousemove="handleMouseMove($event)">
  </div>

data(){
   isMouseDown: true,
   startX: 0,
   scrollLeft: 0
},

methods: {
 	//鼠标滚动左右移动
    handleScroll(e) {
      // e.wheelDelta或者e.detail判断滚轮方向
      const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
      // 控制左右滚动的距离
      e.currentTarget.scrollLeft -= delta * 100
      e.preventDefault()
    },

    handleMouseUp() {
      this.isMouseDown = false
    },
    handleMoseDown(event) {
      this.isMouseDown = true
      this.startX = event.clientX;
      this.scrollLeft  = this.$refs.navbar.scrollLeft ;
    },
    //鼠标移动
    handleMouseMove(event) {
      if (this.isMouseDown) {
        let moveX = event.clientX;
        let scrollX = moveX - this.startX;
        this.$refs.navbar.scrollLeft = this.scrollLeft - scrollX
      }
    }
 }

.out-box {
  overflow-x: auto;
  -ms-overflow-style: none;
  /* 隐藏滚动条 */
  scrollbar-width: none;

  /* 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
  }
}