VUE中鼠標(biāo)滾輪使div左右滾動的方法詳解
前言
技術(shù)點(diǎn): addEventListener/attachEvent(傳遞參數(shù))
功能描述: 鼠標(biāo)停在div中,若div有x軸滾動條,則鼠標(biāo)滾輪控制x軸滾動條橫向滾動
一、單個實(shí)現(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ā),因?yàn)閙ounted是掛載完成,這時請求還沒開始,也就是說這時div還沒x軸滾動條,所以應(yīng)該在請求完成后觸發(fā)scrollFunction()
注意2: 若在請求結(jié)束得到后端返回內(nèi)容時觸發(fā),直接觸發(fā)你會發(fā)現(xiàn)不起作用。個人理解:因?yà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)
}
二、多個實(shí)現(xiàn)
關(guān)鍵點(diǎn): addEventListener第二個參數(shù)Function傳參
1.描述
如果一個頁面中有多個div需要實(shí)現(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.因?yàn)橛辛藗鲄ⅲ詄vent直接放在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ā)
因?yàn)橛辛藚?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)文章希望大家以后多多支持腳本之家!
- vue左右側(cè)聯(lián)動滾動的實(shí)現(xiàn)代碼
- vue 導(dǎo)航錨點(diǎn)_點(diǎn)擊平滑滾動,導(dǎo)航欄對應(yīng)變化詳解
- vue tab滾動到一定高度,固定在頂部,點(diǎn)擊tab切換不同的內(nèi)容操作
- vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動到頁面對應(yīng)位置的方法(使用c3平滑屬性實(shí)現(xiàn))
- vue+導(dǎo)航錨點(diǎn)聯(lián)動-滾動監(jiān)聽和點(diǎn)擊平滑滾動跳轉(zhuǎn)實(shí)例
- vue監(jiān)聽滾動事件實(shí)現(xiàn)滾動監(jiān)聽
- Vue.js實(shí)戰(zhàn)之通過監(jiān)聽滾動事件實(shí)現(xiàn)動態(tài)錨點(diǎn)
- vue實(shí)現(xiàn)消息的無縫滾動效果的示例代碼
- vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法
- vue實(shí)現(xiàn)左右點(diǎn)擊滾動效果
相關(guān)文章
vue3實(shí)現(xiàn)H5表單驗(yàn)證組件的示例
本文主要介紹了vue3實(shí)現(xiàn)H5表單驗(yàn)證組件的示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明
這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-06-06
vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案
這篇文章主要介紹了vue項(xiàng)目打包后,由于html被緩存導(dǎo)致出現(xiàn)白屏的處理方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03
vue項(xiàng)目中添加electron的詳細(xì)代碼
這篇文章通過實(shí)例代碼給大家介紹了vue項(xiàng)目中添加electron的方法,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-11-11
Vue在echarts?tooltip中添加點(diǎn)擊事件案例詳解
本文主要介紹了Vue項(xiàng)目中在echarts?tooltip添加點(diǎn)擊事件的案例詳解,代碼具有一定的價值,感興趣的小伙伴可以來學(xué)習(xí)一下2021-11-11
vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)
本文主要介紹了vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
通過實(shí)例解析vuejs如何實(shí)現(xiàn)調(diào)試代碼
這篇文章主要介紹了通過實(shí)例解析vuejs如何實(shí)現(xiàn)調(diào)試代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
詳解vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06

