前言
技術(shù)點(diǎn)： addEventListener/attachEvent(傳遞參數(shù))
功能描述： 鼠標(biāo)停在div中，若div有x軸滾動(dòng)條，則鼠標(biāo)滾輪控制x軸滾動(dòng)條橫向滾動(dòng)
一、單個(gè)實(shí)現(xiàn)
1.定義變量
|
1
2
3
4
5
|
data () { return { domObj: null }} |
2.編寫方法
綁定事件
|
1
2
3
4
5
6
7
8
9
|
scrollFunction () { this.domObj = document.getElementById('ceshi') // 通過(guò)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上時(shí)，鼠標(biāo)滾輪滾動(dòng)觸發(fā)的事件
|
1
2
3
4
5
6
7
8
9
|
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ā)
|
1
|
this.scrollFunction() |
注意1： 如果是內(nèi)容v-for循環(huán)出來(lái)的div，內(nèi)容從后端獲取，此時(shí)就不能在mounted中觸發(fā)，因?yàn)閙ounted是掛載完成，這時(shí)請(qǐng)求還沒(méi)開(kāi)始，也就是說(shuō)這時(shí)div還沒(méi)x軸滾動(dòng)條，所以應(yīng)該在請(qǐng)求完成后觸發(fā)scrollFunction()
注意2： 若在請(qǐng)求結(jié)束得到后端返回內(nèi)容時(shí)觸發(fā)，直接觸發(fā)你會(huì)發(fā)現(xiàn)不起作用。個(gè)人理解：因?yàn)檎?qǐng)求到數(shù)據(jù)，vue雙向綁定監(jiān)聽(tīng)到數(shù)據(jù)改變，觸發(fā)頁(yè)面更新，瀏覽器重繪或回流需要時(shí)間（如若有誤，還望指正），所以可以用setTimeout
|
1
2
3
|
setTimeout(function () { this.scrollFunction() }, 100) // 0.1S后執(zhí)行綁定方法 |
4.卸載
在beforeDistroy中卸載
|
1
2
3
4
5
6
7
|
if (!this.domObj) returnif (this.domObj.attachEvent) { this.domObj.detachEvent('onmousewheel', this.mouseScroll)}if (this.domObj.addEventListener) { this.domObj.removeEventListener('DOMMouseScroll', this.mouseScroll, false)} |
二、多個(gè)實(shí)現(xiàn)
關(guān)鍵點(diǎn)： addEventListener第二個(gè)參數(shù)Function傳參
1.描述
如果一個(gè)頁(yè)面中有多個(gè)div需要實(shí)現(xiàn)這個(gè)效果，按照上面的方法CV是當(dāng)然可以的，不過(guò)就顯得代碼沒(méi)有深度，所以用到了addEventListener傳參。
2.addEventListener（參數(shù)）
綁定事件修改如下：
參數(shù)：obj：需要橫向滾動(dòng)的div存放位置
id：需要橫向滾動(dòng)的div的id
|
1
2
3
4
5
6
7
8
9
|
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有了個(gè)參數(shù)obj，但是addEventListener第二個(gè)參數(shù)接收的是一個(gè)function。在觸發(fā)執(zhí)行時(shí)，如果想將參數(shù)傳遞進(jìn)去的話，就得使用閉包的形式。具體修改如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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.因?yàn)橛辛藗鲄ⅲ詄vent直接放在mouserScroll(obj, event)這樣是取不到event的，所以得用JS取event的方式寫：
|
1
|
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ā)
因?yàn)橛辛藚?shù)，所以觸發(fā)的寫法如下：
|
1
2
|
this.scrollFunction(this.domObj1, 'ceshi1') this.scrollFunction(this.domObj2, 'ceshi2') |
其中，this.domObj1和this,domObj2需要先在data中定義，第二個(gè)參數(shù)是需要橫向滾動(dòng)的div的id值。
3.卸載
最后在beforeDistroy中卸載就好了，卸載代碼同上。
總結(jié)
到此這篇關(guān)于VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的文章就介紹到這了,更多相關(guān)VUE鼠標(biāo)滾輪使div左右滾動(dòng)內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_47113728/article/details/111057671
