案發現場
今天給后臺的表格組件替換為一個前同事寫的表格組件，替換完發現除了滾動條不能用鼠標滾動以外，其他都沒什么大問題。我是一個跟任何東西都可以較勁的人，我不信一個小小的滾動條還能奈我何？于是就發生了這個血案。從看源碼，到問前同事，足足浪費了我一個下午來找問題，深深地感到自己的能力是如此的不足。
案發詳情
滾動條歸屬的問題。
我們都知道，如何頁面超過了瀏覽器窗口的大小，瀏覽器會自動生成一個滾動條。這個滾動條是屬于誰的？是屬于html元素還是body元素的？
都不是！！
當一個子元素超過了其父元素的限定高度并且在父元素設置了overflow:auto或者overflow:scroll父元素容器就會產生一個滾動條，這個滾動條毫無疑問是歸屬于父元素的。直接看demo01，以下是demo01的主要代碼:
<div class="parent">
parent
<div class="child">
child
</div>
</div>
body{
margin:0;
}
.parent{
height:400px;
border:1px solid #ddd;
overflow:auto;
}
.child{
height:800px;
background-color:#eee;
}
可以看到，child撐開了parent的高度，于是parent生成了滾動條，滾動條屬于parent，這個是沒有爭議的。
如何判斷滾動條的歸屬呢？
一種直觀的方法：可以通過控制臺的Element面板，把鼠標hover在parent元素上，可以看到滾動條是在元素內部的。(在Mac下，滾動條的表現形式不太一樣，只有滾動的時候才會出現滾動條，沒有滾動時自動隱藏)
另一種方法是可以通過對元素添加scroll監聽事件來判斷。
如果是body下的直接子元素的高度超過了body的限定高度，并且給body增加overflow :auto，這時生成的滾動條是屬于誰的？看一下例子demo02，以下是主要代碼：
<div class="child">
Child
</div>
html, body{
height:100%;
}
body{
margin:0;
overflow:auto;
}
.child{
height:1000px;
background-color:#eee;
}
咦，好像滾動條并不屬于body元素？？確實不屬于body，也不屬于html。Mac下按照上面第一種方法觀察，滾動條好像是屬于html元素的，但其實不然，可以通過給元素添加scroll事件的監聽就可以發現，滾動的時候并不會觸發html元素或者body元素的scroll事件。
//監聽window窗口的滾動事件
window.addEventListener('scroll', (e) => {
console.log('window');
})
//監聽document對象的滾動事件
document.addEventListener('scroll', (e) => {
console.log('document');
})
//監聽html元素的滾動事件
document.documentElement.addEventListener('scroll', (e) => {
console.log('html');
})
//監聽body元素的滾動事件
document.body.addEventListener('scroll', (e) => {
console.log('body');
})
上面的四個監聽器，滾動的時候只有前兩個才會被觸發，所以證明滾動條是屬于document對象的。
為什么window也能監聽到scroll事件呢？這是因為事件冒泡
當html元素也添加overflow:auto時，滾動條會是誰的呢？看例子demo03
這時，滾動條貌似是屬于body的？是的沒錯，就是屬于body的，用監聽器來監聽一下滾動事件，只會觸發document.body的監聽器，而不會觸發window和document的。
為什么會這樣？應該不僅只有我一個人才發現滾動條這個坑的吧？TAT
先來回顧一下overflow有哪些值：
/* 默認值。內容不會被修剪，會呈現在元素框之外*/
overflow: visible;
/* 內容會被修剪，并且其余內容不可見 */
overflow: hidden;
/* 內容會被修剪，瀏覽器會顯示滾動條以便查看其余內容 */
overflow: scroll;
/* 由瀏覽器定奪，如果內容被修剪，就會顯示滾動條 */
overflow: auto;
/* 規定從父元素繼承overflow屬性的值 */
overflow: inherit;
于是得出結論(也可以說個人猜測，因為不一定正確)：
html和body僅有一個元素會產生滾動條時，這個滾動條會默認歸屬于document
當html和body元素的overflow屬性都是默認值auto時，因為body高度可能超過html的高度，這時就會產生一個滾動條，這個滾動條屬于document的，所以如果body再產生一個滾動條，就只能是屬于body自己的了。
鼠標滾輪事件
頁面出現滾動條時，我們可以用鼠標滾輪來對頁面進行縱向滾動，那是否可以組織這個滾動行為呢？
肯定是可以的。e.preventDefault()就是阻止事件的默認行為，在mousewheel事件監聽里加上這句，就能阻止鼠標滾輪觸發滾動事件了。
因為這個，讓我在組件源碼里折騰了好一會，當然不是不知道e.preventDefault()，是忽略了它的作用。
因為工作忙，這篇文章前后寫了好久，當時的一些思路靈感都已經消逝了，寫不下去了，先到這為止吧，之后有想起什么遺漏的再補上。
