使用vue实现一个简单的鼠标拖动滚动效果插件
时间：2023-03-16 12:26:49
科技观察
.vue-drag-scroll-out-wrapper{overflow-x:hidden;width:100%;height:100%;cursor:grab;position:absolute;top:0;left:0;&::-webkit-scrollbar{width:0!important}//隐藏垂直滚动条demohttp://www.longstudy.club/vue-drag-scroll/index.html最近在做一个新项目，有一个需要这样：简单描述一下，当鼠标拖动页面时，整个页面会随着鼠标的拖动而移动。如果页面有内容，里面的内容也需要整体移动到外层。一开始没什么想法，发了朋友圈，得到了很多答案，主要是用拖拽，但是这个拖拽只是单个元素拖拽，想拖拽整个视图。这里又断线了。于是又回到飞书的类似功能的页面，然后仔细查看了它页面的DOM结构，如下图：找到这一层，把页面设置得很宽很高，为了隐藏滚动条，所以设置overflow:hidden;，看到这个设置，突然灵光一闪，难道是用拖动来触发滚动条的滚动，想想，哇，这个思路可行，NB。开始尝试创建一个vue项目。我不会详细介绍这个。我已经在github上发布了原始代码。有兴趣的可以自己看看：https://github.com/qq449245884/vue-drag-scroll先给外层加个大宽高：//这里省略一些不太重要的代码
这里设置了一个计算属性zoomStye，主要用途是给外层加上一个宽高，这里我还设置了一个缩放比较，为了能够放大和缩小页面，如下所述。运行效果：接下来我们需要监听鼠标拖动触发滚动条效果，因为需要对dom进行操作，所以这里我们将拖动处理逻辑用vue命令封装起来，这样后面如果有需要，只需使用此命令。注意：如果在vue中需要对dom进行多项操作，最好用指令进行封装。指令代码如下：importVuefrom'vue'Vue.directive('dragscroll',function(el){el.onmousedown=function(ev){console.log(el)constdisX=ev.clientXconstdisY=ev.clientYconstoriginalScrollLeft=el.scrollLeftconstoriginalScrollTop=el.scrollTopconstooriginalScrollBehavior=el.style['scroll-behavior']constoriginalPointerEvents=el.style['pointer-events']//auto：默认值，表示滚动框立即滚动到指定位置。el.style['scroll-behavior']='auto'el.style['cursor']='grabbing'//鼠标移动事件是监听整个文档，这样鼠标也可以移到外面element实现拖动document.onmousemove=function(ev){ev.preventDefault()//计算拖动偏移距离constdistanceX=ev.clientX-disXconstdistanceY=ev.clientY-disYel.scrollTo(originalScrollLeft-distanceX,originalScrollTop-distanceY)console.log(originalScrollLeft-distanceX,originalScrollTop-distanceY)//因为我们的图片本身有点击效果，所以我们需要屏蔽鼠标拖动时的点击事件el.style['pointer-events']='none'document.body.style['cursor']='grabbing'}document.onmouseup=function(){document.onmousemove=nulldocument.onmouseup=nullel.style['scroll-behavior']=originalScrollBehaviorel.style['pointer-events']=originalPointerEventsel.style['cursor']='grab'}}})这里的主要思想是使用el.scrollTo来触发滚动条的移动。有了dragscroll命令，我们就来使用吧。首先，我们需要添加一个外层：此处省略重要代码
