vue中引入mousewheel事件及兼容性處理方式
引入mousewheel事件及兼容性處理
項目實現過程中需要對一個已經有縱向滾動條的table表格增加鼠標滾輪（mousewheel）事件，方便查看數據；其實現原理與我上一篇博客中的拖動事件類似，利用模擬出來的同一個滾動條來實現
滾動條設置的要點在於
1、滾動條與滾動槽的高度比例 應該等於 內容區（動態變化）和可視區的高度比例；滾動槽與可視區平齊，高度一樣；滾動條的高度則根據內容的高度等比例計算；
2、各元素的定位采用絕對定位，其父元素采用相對定位，這樣就能很好地設置樣式；
佈局與樣式做好後，隻需要在組件methods註冊方法，在元素就位後調用該方法，在方法內部為表格綁定（mousewheel）事件；在這裡需要考慮兼容性問題，firefox並不支持mousewheel事件，它對應的鼠標滾動事件為DOMMouseScroll事件，並且該事件僅能通過DOM2級（addEventListener）添加處理程序；並且判斷鼠標滾動方向的方式也不一樣，firefoxt通過detail屬性判斷，向前滾動該屬性為-3，向後+3；其餘瀏覽器通過wheelDelta屬性，向前時為+120的倍數，向後為-120的倍數；
具體內容可參考《js高級程序設計》事件一章；添加函數如下：
scroll(){
this.wrapDiv = document.getElementById("wrap");
this.contentDiv = document.getElementById("context-table");
this.contentDiv1 = document.getElementById("context-table1");
this.sliderWrap = document.getElementById("sliderWrap");
this.slider = document.getElementById("slider");
//設置比例
let scale = this.wrapDiv.clientHeight / this.contentDiv.clientHeight;
if (scale < 1) {
this.mouseFlag = true;
let h1 = this.sliderWrap.clientHeight * scale;
h1 = (h1 < 50) ? 50 : h1;
this.slider.style.height = h1 + "px";/*滾動條高度動態變化*/
let y = 0;
let that = this;
//為firefox添加滾輪事件
if (document.addEventListener){
document.addEventListener('DOMMouseScroll',function (e) {
if(that.mouseFlag){
//console.log('scroll');
let event1 = window.event|| e;
y = (event1.detail > 0) ? y + 8 : y - 8;
y = (y < 0) ? 0 : y;
let max = that.sliderWrap.clientHeight - that.slider.clientHeight;
y = (y > max + 1) ? max + 1 : y;
that.slider.style.top = y + "px";
scale = that.wrapDiv.clientHeight / that.contentDiv.clientHeight;
let y1 = -y / scale;
that.contentDiv.style.top = y1 + "px";
that.contentDiv1.style.top = y1 + "px";
}
},false)
}
this.wrapDiv.onmousewheel = function (e) {
if (scale < 1) {
let event1 = window.event || e;
y = (event1.wheelDelta < 0) ? y + 8 : y - 8;
y = (y < 0) ? 0 : y;/*限定滾動范圍*/
let max = that.sliderWrap.clientHeight - that.slider.clientHeight;
//console.log(scale, y, sliderWrap.clientHeight, slider.clientHeight);
y = (y > max + 1) ? max + 1 : y;
that.slider.style.top = y + "px";
scale = that.wrapDiv.clientHeight / that.contentDiv.clientHeight;
let y1 = -y / scale;
that.contentDiv.style.top = y1 + "px";
that.contentDiv1.style.top = y1 + "px";
}
}
}
else{/*當內容區高度小於等於可視區時，去除綁定的事件和滾動條*/
this.wrapDiv.onmousewheel =null;
if(document.addEventListener){
this.mouseFlag = false;
}
this.sliderWrap.style.visibility = 'hidden';
let height = this.contentDiv.clientHeight;
tableRight.style.height = height+72+'px';
this.wrapDiv.style.height = height+2+'px';
}
},
該函數在給firefox綁定的事件解綁時遇到瞭問題，由於removeEventListener()需要通過句柄來解綁，而addEventListener()通過句柄添加處理函數會導致event參數無法傳遞的問題；即使在需要解綁時給document綁定空的處理函數也無法覆蓋前一個綁定函數；最後隻好添加一個標志，在需要解綁函數時改變標志的值；在綁定函數中通過判斷該標志的值來確定是否要做操作；
通過上述方式即可很好地實現鼠標滾動事件的效果，並不會有兼容性的問題出現。
註：若僅僅是為表格綁定單一的滾動事件，則可以不顯示滾動條，甚至不設置滾動條；滾動條的作用僅僅是用來指示內容區滾動的位置，以及配合拖動事件使用；
關於scroll和mousewheel事件的問題
需要註意的點
火狐的鼠標滾輪事件是DOMMouseScroll
事件參數兼容：e=window.event||e;(下面省略)
preventDefault()函數取消的是默認事件，不會把我們自己添加的事件處理刪除
實驗開始
在下面驗證例子的基礎上實驗，實驗之間代碼沒有幹涉：
1.原樣輸出
在元素內無論是手動拉動滾動條還是滾動鼠標滾輪，'d'都是無法出現的。而當元素滾動到達頂部或底部的時候，輸出的是就有'd'瞭，但是這個時候並沒有輸出'b'，說明scroll事件本來就沒有發生冒泡。而document的scroll事件是由於其他因素觸發的。
2.在element的mousewheel事件處理裡把冒泡取消
e.stopPropagation();
這時候在元素內滾動鼠標滾輪，'c'始終是無法出現的，說明我們阻止mousewheel事件的冒泡成功瞭。但是在滾動條到達底部或頂部時，雖然'c'依舊沒有出現，但是'd'卻出現瞭，說明這個時候的document的scroll事件是靠element的mousewheel來觸發的。
到這裡就出現一個問題：element的mousewheel事件在默認處理裡對這一情形進行瞭處理嗎？
3.在element的mousewheel事件處理裡取消默認處理
e.preventDefault();
這時候在元素內滾動鼠標，隻會有'a'、'c'會出現，頁面也不會滾動。說明鼠標滾輪滾動element頁面的效果是由element的mousewheel默認事件處理來的。這個時候留意實驗1中滾輪滾動一下'b'的輸出數量，大概就能猜到默認處理的過程。
4.在element的mousewheel裡添加一個自己的頁面滾動（與默認處理的滾動方向相反）
element.scrollTop+=e.wheelDelta>0?30:-30;//手動添加的頁面滾動
這個時候在元素內滾動鼠標，你會發現即使滾動到頂部或底部，元素外的頁面並不會滾動，且並沒有輸出'd'，也就是document的scroll事件沒有觸發。不好的一點是你在滾動到底部或頂部時，繼續滾動鼠標的話，元素內還是會滾動，隻不過是先下再上（或先上再下）地波動一下。
5.在element的mousewheel裡添加一個自己的頁面滾動（與默認處理的滾動方向相同）
element.scrollTop+=e.wheelDelta<0?30:-30;//手動添加的頁面滾動
這個時候在元素內滾動鼠標，你會發現即使滾動到頂部或底部，元素外的頁面跟著滾動，且輸出'd'，也就是document的scroll事件觸發瞭。
這裡需要註意到一點：元素的scrollTop屬性是無法無限增加和減少的，到瞭滾動的頂部或底部後隻能反向變化（可以自行輸出測試）。
6.在實驗5的基礎上，將滾動的距離調整到很大
element.scrollTop+=e.wheelDelta<0?300:-300;（值要大等於滾動行程）
認真觀察輸出的'b'的個數，和實驗1的對比，你會發現這次隻有1個'b'，而且還輸出瞭'd'，而且'd'的數量還不少。經過一些其他的實驗，得到：默認事件處理裡的判斷大概如下：
(function scroll(element){
for(var i=0;i<12;i++){
var temp=element.scrollTop;
element.scrollTop+=e.wheelDelta<0?10:-10; //滾動算法肯定不是這個，這裡隻是簡單演示
if(temp!= element.scrollTop){
//滾動‘消息樹'的下一個元素（和冒泡是一個列表）
var newEle=....//消息樹怎麼獲取我不懂
scroll(newEle);
return;
}
}
})();
驗證例子：
addEventListener(element,'mousewheel',function(e){
console.log('a');
});
addEventListener(element,'scroll',function(e){
console.log('b');
});
addEventListener(document.documentElement,'mousewheel',function(e){
console.log('c');
});
addEventListener(document,'scroll',function(e){
console.log('d');
});
結論：通過上面的6個實驗，很容易發現在元素的mousewheel的默認處理事件裡對scrollTop屬性進行變化和判斷，如果沒有發生變化就對外部元素進行滾動一下（具體滾動算法不懂，滾動距離和鼠標滾一下是一樣的），以此類推，如果下一個元素到邊界瞭，就再下一個。而這個過程和冒泡是沒有關系的，隻是當前元素的mousewheel默認事件處理進行的。
應用：因此為瞭實現元素滾動到底時繼續滾動卻不會使外部元素滾動，我們可以直接取消它的默認處理，然後給一個自己的滾動函數就可以瞭。至於怎麼滾就看自己給什麼函數瞭，而冒泡取不取消也看自己，上面的默認處理在冒泡和捕獲階段是不進行的。
例子如下：
addEventListener(element,'mousewheel',function(e){
console.log('a');
e.preventDefault();
// e.stopPropagation();
ulObj.scrollTop+=e.wheelDelta<0?20:-20;
});
addEventListener(element,'scroll',function(e){
console.log('b');
});
addEventListener(document.documentElement,'mousewheel',function(e){
console.log('c');
});
addEventListener(document,'scroll',function(e){
console.log('d');
});
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。
推薦閱讀：
- vue中的addEventListener和removeEventListener用法說明
- Vue實現上拉加載下一頁效果的示例代碼
- vue實現錨點定位功能
- 淺談VUE uni-app 基礎組件
- JavaScript三種常用網頁特效詳解