小说阅读器,殿上欢

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

使用Vue實(shí)現(xiàn)一個(gè)簡單的鼠標(biāo)拖拽滾動效果插件

[[356473]]

十年的彭陽網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整彭陽建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“彭陽網(wǎng)站設(shè)計(jì)”,“彭陽網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

演示事例

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

最近在做一個(gè)新的項(xiàng)目，有個(gè)需要是這樣的：

簡單描述一下，就是鼠標(biāo)拖動頁面，整個(gè)頁面會隨著的鼠標(biāo)的拖拽而移動，如果頁面有內(nèi)容，里面的內(nèi)容也需要跟著拖動的外層整體移到。

一開始沒啥思路，所以就發(fā)了個(gè)朋友圈，得到的答案挺多的，主要還是用拖拽之類的，但這個(gè)拖拽只是單個(gè)元素的拖動，我想要的整個(gè)視圖的拖動。

這里線索又?jǐn)嗔恕?/p>

于是又回到飛書有類似功能的頁面，然后仔細(xì)檢查一下它頁面的 DOM 結(jié)構(gòu)，如下所示：

發(fā)現(xiàn)有這一層，它把頁面設(shè)置的很寬，很高，為了隱藏滾動條，所以設(shè)置overflow: hidden;，看了這一設(shè)置，突然靈光一現(xiàn)，難道它是用拖拽來觸發(fā)滾動條的滾動，在細(xì)想，哇靠，這思路可行的，NB。

準(zhǔn)備上手試試

創(chuàng)建一個(gè) vue 項(xiàng)目，這個(gè)就不細(xì)說的，我已經(jīng)把原碼發(fā)布到 github 上了，有興趣自己看看：

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

首先給外層加個(gè)大大的寬和高：

 
 
 
 
  
  
  
   
  
  
  
    // 這里省略一些不太重要的代碼

這里設(shè)置了一個(gè)計(jì)算屬性 zoomStye，主要使用就是給外層加一個(gè)在的寬，和高，這里我還設(shè)置了一個(gè)縮放比較，為了是能放大縮小頁面，下面講。運(yùn)行效果：

接著，我們需要監(jiān)聽鼠標(biāo)的拖拽來觸發(fā)滾動條效果，因?yàn)樾枰獙?dom 的操作，所以這里把拖拽處理邏輯用 vue 指令封裝起來，這樣后面有需要，只要使用該指令即可。

注意：在 vue 中如果需要對 dom 進(jìn)行多次操作，最好是把它封裝在指令中。

指令代碼如下：

 
 
 
 
  
  
  
  import Vue from 'vue' 
  
  
  
   
  
  
  
  Vue.directive('dragscroll', function (el) { 
  
  
  
    el.onmousedown = function (ev) { 
  
  
  
      console.log(el) 
  
  
  
      const disX = ev.clientX 
  
  
  
      const disY = ev.clientY 
  
  
  
      const originalScrollLeft = el.scrollLeft 
  
  
  
      const originalScrollTop = el.scrollTop 
  
  
  
      const originalScrollBehavior = el.style['scroll-behavior'] 
  
  
  
      const originalPointerEvents = el.style['pointer-events'] 
  
  
  
      // auto: 默認(rèn)值，表示滾動框立即滾動到指定位置。 
  
  
  
      el.style['scroll-behavior'] = 'auto' 
  
  
  
      el.style['cursor'] = 'grabbing' 
  
  
  
      // 鼠標(biāo)移動事件是監(jiān)聽的整個(gè)document，這樣可以使鼠標(biāo)能夠在元素外部移動的時(shí)候也能實(shí)現(xiàn)拖動 
  
  
  
      document.onmousemove = function (ev) { 
  
  
  
        ev.preventDefault() 
  
  
  
        // 計(jì)算拖拽的偏移距離 
  
  
  
        const distanceX = ev.clientX - disX 
  
  
  
        const distanceY = ev.clientY - disY 
  
  
  
   
  
  
  
        el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY) 
  
  
  
        console.log(originalScrollLeft - distanceX, originalScrollTop - distanceY) 
  
  
  
        // 由于我們的圖片本身有點(diǎn)擊效果，所以需要在鼠標(biāo)拖動的時(shí)候?qū)Ⅻc(diǎn)擊事件屏蔽掉 
  
  
  
        el.style['pointer-events'] = 'none' 
  
  
  
        document.body.style['cursor'] = 'grabbing' 
  
  
  
      } 
  
  
  
      document.onmouseup = function () { 
  
  
  
        document.onmousemove = null 
  
  
  
        document.onmouseup = null 
  
  
  
        el.style['scroll-behavior'] = originalScrollBehavior 
  
  
  
        el.style['pointer-events'] = originalPointerEvents 
  
  
  
        el.style['cursor'] = 'grab' 
  
  
  
      } 
  
  
  
    } 
  
  
  
  })

這里的主要思路就是利用 el.scrollTo 來觸發(fā)滾動條的移到。

有了 dragscroll 指令，我們來使用一下，首先我們需要在增加一層外層：

 
 
 
 
  
  
  
   
  
  
  
    
  
  
  
      // 這里省略一些不太重要的代碼

.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 要設(shè)置 overflow 值，否則無法滾動(測試出來的)。

這樣拖拽效果就出來啦：

增加縮放

這里，我們增加一個(gè)視圖的放大和縮小，所以增加兩個(gè)按鈕：

 
 
 
 
  
  
  
   
  
  
  
     
  
  
  
    
  
  
  
  
    :class="{'disabled': scale === 25}" style="font-size:22px" 
  
  
  
      @click="handleReduce" 
  
  
  
    /> 
  
  
  
    
  
  
  
  
    :class="{'disabled': scale === 100}" 
  
  
  
      @click="handleEnlarge"   
  
  
  
    /> 
  
  
  
    {{scale}}%

效果：

這里的放大和縮小的邏輯就是通過我們增加減少 scale 來實(shí)現(xiàn)

 
 
 
 
  
  
  
  handleReduce () { 
  
  
  
    if (this.scale === 25) return 
  
  
  
    this.scale -= 25 
  
  
  
  }, 
  
  
  
  handleEnlarge () { 
  
  
  
    if (this.scale === 100) return 
  
  
  
    this.scale += 25 
  
  
  
  }

縮放比例的關(guān)系就是開關(guān)給出的代碼：

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

這個(gè)比例是我自己定的，比如現(xiàn)在減少到 75% ，那么最外層的高和寬就要對應(yīng)的增加原來的 25%，因?yàn)榭s放就是視野上的縮小，對應(yīng)的距離就是拉寬。

最后就是使用 CSS 的 transform 來做縮放：

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

最終的效果：

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。

當(dāng)前文章：使用Vue實(shí)現(xiàn)一個(gè)簡單的鼠標(biāo)拖拽滾動效果插件
URL地址：http://fisionsoft.com.cn/article/djioidc.html

新聞中心

其他資訊