VUE中鼠標滾輪使div左右滾動的方法詳解
前言
技術點： 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上時，鼠標滾輪滾動觸發(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() // 阻止瀏覽器默認事件
this.domObj.scrollLeft = this.domObj.scrollLeft + step
}
3.觸發(fā)
可以直接在mounted中觸發(fā)
this.scrollFunction()
注意1： 如果是內容v-for循環(huán)出來的div，內容從后端獲取，此時就不能在mounted中觸發(fā)，因為mounted是掛載完成，這時請求還沒開始，也就是說這時div還沒x軸滾動條，所以應該在請求完成后觸發(fā)scrollFunction()
注意2： 若在請求結束得到后端返回內容時觸發(fā)，直接觸發(fā)你會發(fā)現不起作用。個人理解：因為請求到數據，vue雙向綁定監(jiān)聽到數據改變，觸發(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)
}
二、多個實現
關鍵點： 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。在觸發(fā)執(zhí)行時，如果想將參數傳遞進去的話，就得使用閉包的形式。具體修改如下：
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.觸發(fā)
因為有了參數，所以觸發(fā)的寫法如下：
this.scrollFunction(this.domObj1, 'ceshi1') this.scrollFunction(this.domObj2, 'ceshi2')
其中，this.domObj1和this,domObj2需要先在data中定義，第二個參數是需要橫向滾動的div的id值。
3.卸載
最后在beforeDistroy中卸載就好了，卸載代碼同上。
總結
到此這篇關于VUE中鼠標滾輪使div左右滾動的文章就介紹到這了,更多相關VUE鼠標滾輪使div左右滾動內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue.js iview打包上線后字體圖標不顯示解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要給大家介紹了關于vue項目配置國際化?$t('')的介紹和用法的相關資料,多語言和國際化現在已經成為一個網站或應用的必要功能之一,Vue作為一款流行的前端框架,在這方面也有著靈活的解決方案,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue多條件篩選功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要為大家詳細介紹了利用Vue-cli搭建Vue項目框架的相關資料，對大家深入了解Vue有一定的幫助，感興趣的小伙伴可以了解一下2023-02-02
基于vue監(jiān)聽滾動事件實現錨點鏈接平滑滾動的方法
本篇文章主要介紹了基于vue監(jiān)聽滾動事件實現錨點鏈接平滑滾動的方法，非常具有實用價值，有興趣的可以了解一下2018-01-01
vue2如何使用vue-i18n搭建多語言切換環(huán)境
這篇文章主要介紹了vue2-使用vue-i18n搭建多語言切換環(huán)境的相關知識,在data(){}中獲取的變量存在更新this.$i18n.locale的值時無法自動切換的問題,需要刷新頁面才能切換語言,感興趣的朋友一起看看吧2023-12-12
vue使用原生js創(chuàng)建元素樣式不生效問題及解決
這篇文章主要介紹了vue使用原生js創(chuàng)建元素樣式不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue自定義指令之面板拖拽的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了使用vue-print-nb打印el-table問題總結,通過實例代碼介紹了vue-print-nb 打印功能,本文結合實例代碼講解的非常詳細,感興趣的朋友一起看看吧2024-01-01
今天小編就為大家分享一篇基于vue中對鼠標劃過事件的處理方式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08