【近期项目总结】使用Vue实现一个简单的鼠标拖动滚动效果插件
时间：2023-04-02 20:37:19
HTML
.vue-drag-scroll-out-wrapper{overflow-x:hidden;宽度：100%；高度：100%；光标：抓住；位置：绝对；顶部：0；左：0；&::-webkit-scrollbar{width:0!important}//隐藏垂直滚动条}喜欢再看，微信搜索【大千世界】，关注【前端小智】这个不有大厂背景，但有积极向上的心态。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...演示案例http://www.longstudy.club/vue...最近在做一个新项目，有这样的需求：简单描述一下，即鼠标拖动页面，整个页面会随着鼠标的拖动而移动。如果页面有内容，里面的内容也需要随着被拖动的外层一起整体移动。一开始没什么想法，发了朋友圈，得到了很多答案，主要是用拖拽，但是这个拖拽只是单个元素拖拽，想拖拽整个视图。这里又断线了。于是又回到飞书的类似功能的页面，然后仔细查看了它页面的DOM结构，如下图：找到这一层，把页面设置得很宽很高，为了隐藏滚动条，所以设置overflow:hidden;，看到这个设置，突然灵光一闪，难道是用拖动来触发滚动条的滚动，想想，哇，这个思路可行，NB。我将尝试创建一个vue项目。我不会详细说明这一点。我已经在github上发布了原始代码。有兴趣的可以自己看看：https://github.com/qq44924588...先加个大宽高：//这里省略一些不太重要的代码
这里设置了一个计算属性zoomStye，主要用处是给外层加上一个width，和high，这里我还设置了一个zoom比较，为了页面的放大和缩小，下面说说关于它下面。运行效果：接下来我们需要监听鼠标拖动触发滚动条效果，因为需要对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.scrollTopconstoriginalScrollBehavior=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命令，让我们使用它。首先，我们需要添加一个外层：/这里省略一些不太重要的代码
