vue 中如何实现鼠标拖动出发滚动条的跟随移动？

使用场景

在做弹窗、表单或 tab 切换需求的时候，有时候因为内容过长会导致出现滚动条，但是只能拖动滚动条时会导致操作不便，我们会希望实现通过拖动内容区实现滚动条的滑动。这样操作就会简单多了。

实现思路

如果要实现鼠标辅助触发滚动条的移动，需要借助 mousedown，mouseup，mousemove 三个事件，通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。

为方便复用，我们可以创建一个类来封装鼠标事件，使用时把事件挂载到指定容器即可。

1. 创建 move.js 文件

move.js下载地址

move.js 具体代码：

// 鼠标移动滚动位置类
class Drag {
  constructor(vm) {
    this.dragWrap = vm;// 要挂载的容器
    this._dom = {};
    this._x = 0;
    this._y = 0;
    this._top = 0;
    this._left = 0;
    this.move = false;
    this.down = false;
    this.init.apply(this, arguments);
  }
 
  // 绑定事件
  init() {
    this.bindEvent();
  }
 
  // 给要素增加鼠标事件
  // mousedown 按下初始化
  // mousemove 移动
  // mouseup，mouseleave 松开，移出结束移动
  bindEvent() {
    let t = this;
    this.dragWrap.addEventListener('mousedown', (e) => {
      e && e.preventDefault();
      if (!t.move) {
        t.move = false;
        t.down = true;
        t._x = e.clientX;
        t._y = e.clientY;
        t._top = t.dragWrap.scrollTop;
        t._left = t.dragWrap.scrollLeft;
      }
    }, { passive: false});
    this.dragWrap.addEventListener('mouseup',  (e) => {
      e && e.preventDefault();
      t.move = false;
      t.down = false;
    }, { passive: false});
    this.dragWrap.addEventListener('mouseleave',  (e) => {
      e && e.preventDefault();
      t.move = false;
      t.down = false;
    }, { passive: false});
    this.dragWrap.addEventListener('mousemove',  (e) => {
      if (t.down) {
        e && e.preventDefault();
        t.move = true;
        let x = t._x - e.clientX;
        let y = t._y - e.clientY;
        t.dragWrap.scrollLeft = t._left + x;
        t.dragWrap.scrollTop = t._top + y;
      }
    }, { passive: false});
  }
}
export default Drag;

2. 页面中引用

// 需要拖动的 div
<div class="tabBox" id="tabBox"></div>

import Drag from '@/utils/move.js';
mounted() {
    this.changeSlider()
    this.initScroll()
  },
methods: {
changeSlider(){
     let nav = document.getElementById('tabBox')
     // 滚动元素的父容器:刷新滚轮
     nav.scrollIntoView()
   },
   initScroll() {
     let nav = document.getElementById('tabBox')
     new Drag(nav)
   },
}

这样就实现啦，就是如此简单！

原文地址：https://blog.csdn.net/sinat_33255495/article/details/142378715

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！