技術標籤：VUEvue.js

VUE中滑鼠滾輪使div左右滾動

文章目錄

• VUE中滑鼠滾輪使div左右滾動
• 前言
• 一、單個實現
• • 1.定義變數
  • 2.編寫方法
  • 3.觸發
  • 4.解除安裝
• 二、多個實現
• • 1.描述
  • 2.addEventListener（引數）
  • 2.觸發
  • 3.解除安裝

前言

技術點： addEventListener/attachEvent(傳遞引數)
功能描述： 滑鼠停在div中，若div有x軸滾動條，則滑鼠滾輪控制x軸滾動條橫向滾動

一、單個實現

1.定義變數

data () {
	return {
		domObj: null
	}
}

2.編寫方法

繫結事件

scrollFunction (
 
) {
      this.domObj = document.getElementById('ceshi') // 通過id獲取要設定的div
      if (this.domObj.attachEvent) { // IE
        this.domObj.attachEvent('onmousewheel', this.mouseScroll)
      } else if (this.domObj.addEventListener) {
        this.domObj.addEventListener('DOMMouseScroll', this.mouseScroll, false)
 

      }
      this.domObj.onmousewheel = this.domObj.onmousewheel = this.mouseScroll
    }

當滑鼠放在id為‘ceshi’的div上時，滑鼠滾輪滾動觸發的事件

mouseScroll(event) { // google 瀏覽器下
      let detail = event.wheelDelta || event.detail
      let moveForwardStep = -1
      let moveBackStep = 1
      let step = 0
      step =
 
 detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
      event.preventDefault() // 阻止瀏覽器預設事件
      this.domObj.scrollLeft = this.domObj.scrollLeft + step
    }

3.觸發

可以直接在mounted中觸發

this.scrollFunction()

注意1： 如果是內容v-for迴圈出來的div，內容從後端獲取，此時就不能在mounted中觸發，因為mounted是掛載完成，這時請求還沒開始，也就是說這時div還沒x軸滾動條，所以應該在請求完成後觸發scrollFunction()
注意2： 若在請求結束得到後端返回內容時觸發，直接觸發你會發現不起作用。個人理解：因為請求到資料，vue雙向繫結監聽到資料改變，觸發頁面更新，瀏覽器重繪或迴流需要時間（如若有誤，還望指正），所以可以用setTimeout

setTimeout(function () {
            this.scrollFunction()
          }, 100) // 0.1S後執行繫結方法

4.解除安裝

在beforeDistroy中解除安裝

if (!this.domObj) return
if (this.domObj.attachEvent) {
  this.domObj.detachEvent('onmousewheel', this.mouseScroll)
}
if (this.domObj.addEventListener) {
  this.domObj.removeEventListener('DOMMouseScroll', this.mouseScroll, false)
}

二、多個實現

關鍵點： addEventListener第二個引數Function傳參

1.描述

如果一個頁面中有多個div需要實現這個效果，按照上面的方法CV是當然可以的，不過就顯得程式碼沒有深度，所以用到了addEventListener傳參。

2.addEventListener（引數）

繫結事件修改如下：
引數：obj：需要橫向滾動的div存放位置
id：需要橫向滾動的div的id

scrollFunction (obj, id) {
      obj = document.getElementById(id)
      if (obj.attachEvent) {
        obj.attachEvent('onmousewheel', this.mouseScroll(obj))
      } else if (obj.addEventListener) {
        obj.addEventListener('DOMMouseScroll', this.mouseScroll(obj), false)
      }
      obj.onmousewheel = obj.onmousewheel = this.mouseScroll(obj)
    }

既然mouseScroll有了個引數obj，但是addEventListener第二個引數接收的是一個function。在觸發執行時，如果想將引數傳遞進去的話，就得使用閉包的形式。具體修改如下：

mouserScroll (obj) {
      return function () {
        let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event
        let detail, moveForwardStep, moveBackStep
        let step = 0
        if (e.wheelDelta) { // google 下滑負數： -120
          detail = e.wheelDelta
          moveForwardStep = -1
          moveBackStep = 1
        } else if (e.detail) { // firefox 下滑正數：3
          detail = event.detail
          moveForwardStep = 1
          moveBackStep = -1
        }
        step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
        e.preventDefault()
        obj.scrollLeft = obj.scrollLeft + step
      }
    }

注意：
1.因為有了傳參，所以event直接放在mouserScroll(obj, event)這樣是取不到event的，所以得用JS取event的方式寫：

let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event

(document.add ? window.event : arguments[0] ? arguments[0] : event) 是FireFox裡面取event的寫法

2.觸發

因為有了引數，所以觸發的寫法如下：

this.scrollFunction(this.domObj1, 'ceshi1') 
this.scrollFunction(this.domObj2, 'ceshi2')

其中，this.domObj1和this,domObj2需要先在data中定義，第二個引數是需要橫向滾動的div的id值。

3.解除安裝

最後在beforeDistroy中解除安裝就好了，解除安裝程式碼同上。

本人前端小白，以上內容如有錯誤，還望各位不吝賜教！
同意轉載，轉載註明出處就好！