快捷導(dǎo)航

VUE中鼠標(biāo)滾輪使div左右滾動的方法詳解

更新時間：2020年12月14日 10:24:55 作者：金小熊丿

這篇文章主要給大家介紹了關(guān)于VUE中鼠標(biāo)滾輪使div左右滾動的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

技術(shù)點： addEventListener/attachEvent(傳遞參數(shù))

功能描述：鼠標(biāo)停在div中，若div有x軸滾動條，則鼠標(biāo)滾輪控制x軸滾動條橫向滾動

一、單個實現(xiàn)

1.定義變量

data () {
	return {
		domObj: null
	}
}

2.編寫方法

綁定事件

scrollFunction () {
 this.domObj = document.getElementById('ceshi') // 通過id獲取要設(shè)置的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
 }

當(dāng)鼠標(biāo)放在id為‘ceshi'的div上時，鼠標(biāo)滾輪滾動觸發(fā)的事件

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() // 阻止瀏覽器默認(rèn)事件
 this.domObj.scrollLeft = this.domObj.scrollLeft + step
 }

3.觸發(fā)

可以直接在mounted中觸發(fā)

this.scrollFunction()

注意1：如果是內(nèi)容v-for循環(huán)出來的div，內(nèi)容從后端獲取，此時就不能在mounted中觸發(fā)，因為mounted是掛載完成，這時請求還沒開始，也就是說這時div還沒x軸滾動條，所以應(yīng)該在請求完成后觸發(fā)scrollFunction()

注意2：若在請求結(jié)束得到后端返回內(nèi)容時觸發(fā)，直接觸發(fā)你會發(fā)現(xiàn)不起作用。個人理解：因為請求到數(shù)據(jù)，vue雙向綁定監(jiān)聽到數(shù)據(jù)改變，觸發(fā)頁面更新，瀏覽器重繪或回流需要時間（如若有誤，還望指正），所以可以用setTimeout

setTimeout(function () {
   this.scrollFunction()
   }, 100) // 0.1S后執(zhí)行綁定方法

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)
}

二、多個實現(xiàn)

關(guān)鍵點： addEventListener第二個參數(shù)Function傳參

1.描述

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

2.addEventListener（參數(shù)）

綁定事件修改如下：

參數(shù)：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有了個參數(shù)obj，但是addEventListener第二個參數(shù)接收的是一個function。在觸發(fā)執(zhí)行時，如果想將參數(shù)傳遞進(jìn)去的話，就得使用閉包的形式。具體修改如下：

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 下滑負(fù)數(shù)： -120
   detail = e.wheelDelta
   moveForwardStep = -1
   moveBackStep = 1
  } else if (e.detail) { // firefox 下滑正數(shù)：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.觸發(fā)

因為有了參數(shù)，所以觸發(fā)的寫法如下：

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

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

3.卸載

最后在beforeDistroy中卸載就好了，卸載代碼同上。

總結(jié)

到此這篇關(guān)于VUE中鼠標(biāo)滾輪使div左右滾動的文章就介紹到這了,更多相關(guān)VUE鼠標(biāo)滾輪使div左右滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

VUE中鼠標(biāo)滾輪使div左右滾動的方法詳解

目錄

前言

一、單個實現(xiàn)

1.定義變量

2.編寫方法

3.觸發(fā)

4.卸載

二、多個實現(xiàn)

1.描述

2.addEventListener（參數(shù)）

2.觸發(fā)

3.卸載

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

VUE中鼠標(biāo)滾輪使div左右滾動的方法詳解

目錄

前言

一、單個實現(xiàn)

1.定義變量

2.編寫方法

3.觸發(fā)

4.卸載

二、多個實現(xiàn)

1.描述

2.addEventListener（參數(shù)）

2.觸發(fā)

3.卸載

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、單個實現(xiàn)