使用Vue实现一个简单的鼠标拖拽滚动效果插件

 [[356473]]

十年的彭阳网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整彭阳建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“彭阳网站设计”,“彭阳网站推广”以来，每个客户项目都认真落实执行。

演示事例

http://www.longstudy.club/vue-drag-scroll/index.html

最近在做一个新的项目，有个需要是这样的：

 

简单描述一下，就是鼠标拖动页面，整个页面会随着的鼠标的拖拽而移动，如果页面有内容，里面的内容也需要跟着拖动的外层整体移到。

一开始没啥思路，所以就发了个朋友圈，得到的答案挺多的，主要还是用拖拽之类的，但这个拖拽只是单个元素的拖动，我想要的整个视图的拖动。

这里线索又断了。

于是又回到飞书有类似功能的页面，然后仔细检查一下它页面的 DOM 结构，如下所示：

 

发现有这一层，它把页面设置的很宽，很高，为了隐藏滚动条，所以设置overflow: hidden;，看了这一设置，突然灵光一现，难道它是用拖拽来触发滚动条的滚动，在细想，哇靠，这思路可行的，NB。

准备上手试试

创建一个 vue 项目，这个就不细说的，我已经把原码发布到 github 上了，有兴趣自己看看：

https://github.com/qq449245884/vue-drag-scroll

首先给外层加个大大的宽和高：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   // 这里省略一些不太重要的代码 
    3.
 
  •  
  •  

    • 这里设置了一个计算属性 zoomStye，主要使用就是给外层加一个在的宽，和高，这里我还设置了一个缩放比较，为了是能放大缩小页面，下面讲。运行效果：

     

    接着，我们需要监听鼠标的拖拽来触发滚动条效果，因为需要对 dom 的操作，所以这里把拖拽处理逻辑用 vue 指令封装起来，这样后面有需要，只要使用该指令即可。

    注意：在 vue 中如果需要对 dom 进行多次操作，最好是把它封装在指令中。

    指令代码如下：

     
 
 
 
      
  
  
  
  
    1. import Vue from 'vue' 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. Vue.directive('dragscroll', function (el) { 
      4. 
  
  
  
  
    4.   el.onmousedown = function (ev) { 
      5. 
  
  
  
  
    5.     console.log(el) 
      6. 
  
  
  
  
    6.     const disX = ev.clientX 
      7. 
  
  
  
  
    7.     const disY = ev.clientY 
      8. 
  
  
  
  
    8.     const originalScrollLeft = el.scrollLeft 
      9. 
  
  
  
  
    9.     const originalScrollTop = el.scrollTop 
      10. 
  
  
  
  
    10.     const originalScrollBehavior = el.style['scroll-behavior'] 
      11. 
  
  
  
  
    11.     const originalPointerEvents = el.style['pointer-events'] 
      12. 
  
  
  
  
    12.     // auto: 默认值，表示滚动框立即滚动到指定位置。 
      13. 
  
  
  
  
    13.     el.style['scroll-behavior'] = 'auto' 
      14. 
  
  
  
  
    14.     el.style['cursor'] = 'grabbing' 
      15. 
  
  
  
  
    15.     // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动 
      16. 
  
  
  
  
    16.     document.onmousemove = function (ev) { 
      17. 
  
  
  
  
    17.       ev.preventDefault() 
      18. 
  
  
  
  
    18.       // 计算拖拽的偏移距离 
      19. 
  
  
  
  
    19.       const distanceX = ev.clientX - disX 
      20. 
  
  
  
  
    20.       const distanceY = ev.clientY - disY 
      21. 
  
  
  
  
    21.  
      22. 
  
  
  
  
    22.       el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY) 
      23. 
  
  
  
  
    23.       console.log(originalScrollLeft - distanceX, originalScrollTop - distanceY) 
      24. 
  
  
  
  
    24.       // 由于我们的图片本身有点击效果，所以需要在鼠标拖动的时候将点击事件屏蔽掉 
      25. 
  
  
  
  
    25.       el.style['pointer-events'] = 'none' 
      26. 
  
  
  
  
    26.       document.body.style['cursor'] = 'grabbing' 
      27. 
  
  
  
  
    27.     } 
      28. 
  
  
  
  
    28.     document.onmouseup = function () { 
      29. 
  
  
  
  
    29.       document.onmousemove = null 
      30. 
  
  
  
  
    30.       document.onmouseup = null 
      31. 
  
  
  
  
    31.       el.style['scroll-behavior'] = originalScrollBehavior 
      32. 
  
  
  
  
    32.       el.style['pointer-events'] = originalPointerEvents 
      33. 
  
  
  
  
    33.       el.style['cursor'] = 'grab' 
      34. 
  
  
  
  
    34.     } 
      35. 
  
  
  
  
    35.   } 
      36. 
  
  
  
  
    36. }) 
      37.

    这里的主要思路就是利用 el.scrollTo 来触发滚动条的移到。

    有了 dragscroll 指令，我们来使用一下，首先我们需要在增加一层外层：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     // 这里省略一些不太重要的代码 
      4. 
  
  
  
  
    4.   
     
  •  
  •  
  •  
  • .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 } // 隐藏垂直方向的滚动条 
  • } 
  •  

    • // 这里省略一些不太重要的代码 这里需要注意的在 .vue-drag-scroll-out-wrapper 要设置 overflow 值，否则无法滚动(测试出来的)。

    这样拖拽效果就出来啦：

     

    增加缩放

    这里，我们增加一个视图的放大和缩小，所以增加两个按钮：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.    
      3. 
  
  
  
  
    3.   
  
  
  
  
    4.     :class="{'disabled': scale === 25}" style="font-size:22px" 
      5. 
  
  
  
  
    5.     @click="handleReduce" 
      6. 
  
  
  
  
    6.   /> 
      7. 
  
  
  
  
    7.   
  
  
  
  
    8.     :class="{'disabled': scale === 100}" 
      9. 
  
  
  
  
    9.     @click="handleEnlarge"   
      10. 
  
  
  
  
    10.   /> 
      11. 
  
  
  
  
    11.   {{scale}}% 
      12. 
  
  
  
  
    12.    
      13. 
  
  
  
  
    13.  
      14.

    效果：

     

    这里的放大和缩小的逻辑就是通过我们增加减少 scale 来实现

     
 
 
 
      
  
  
  
  
    1. handleReduce () { 
      2. 
  
  
  
  
    2.   if (this.scale === 25) return 
      3. 
  
  
  
  
    3.   this.scale -= 25 
      4. 
  
  
  
  
    4. }, 
      5. 
  
  
  
  
    5. handleEnlarge () { 
      6. 
  
  
  
  
    6.   if (this.scale === 100) return 
      7. 
  
  
  
  
    7.   this.scale += 25 
      8. 
  
  
  
  
    8. } 
      9.

    缩放比例的关系就是开关给出的代码：

     
 
 
 
      
  
  
  
  
    1. const INIT_WIDTH = 2208 
      2. 
  
  
  
  
    2. const INIT_HEIGHT = 1206 
      3. 
  
  
  
  
    3. const width = INIT_WIDTH * (1 + (100 - this.scale)/100) 
      4. 
  
  
  
  
    4. const height = INIT_HEIGHT * (1 + (100 - this.scale)/100) 
      5.

    这个比例是我自己定的，比如现在减少到 75% ，那么最外层的高和宽就要对应的增加原来的 25%，因为缩放就是视野上的缩小，对应的距离就是拉宽。

    最后就是使用 CSS 的 transform 来做缩放：

     
 
 
 
      
  
  
  
  
    1. transform: `scale(${this.scale/100})` 
      2.

    最终的效果：

    本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

    本文题目：使用Vue实现一个简单的鼠标拖拽滚动效果插件
    转载注明：http://www.36103.cn/qtweb/news26/7826.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站制作知识

    行业网站建设

    四川成都网站建设　　 　郫县明安消防器材　　 　乐山主机托管　　 　成都集团网站建设　　 　彭山网站制作　　 　成都免费网站建设　　 　vi形象设计　　 　成都搬家公司　　 　成都响应式网站建设公司　　 　移动网站建设　　 　香港空间腾讯云　　 　亮美家　　 　教育建设方案　　 　网站推广优化　　 　什邡做网站　　 　网站建设开发　　 　眉山网站建设　　 　IDC机房托管　　 　公司网站建设　　 　云主机