overflow屬性引發(fā)的瀏覽器滾動條血案

案發(fā)現(xiàn)場

今天給后臺的表格組件替換為一個前同事寫的表格組件，替換完發(fā)現(xiàn)除了滾動條不能用鼠標滾動以外亿胸，其他都沒什么大問題。我是一個跟任何東西都可以較勁的人，我不信一個小小的滾動條還能奈我何喇颁？于是就發(fā)生了這個血案漏健。從看源碼，到問前同事橘霎，足足浪費了我一個下午來找問題蔫浆，深深地感到自己的能力是如此的不足。

案發(fā)詳情

滾動條歸屬的問題茎毁。

我們都知道克懊，如何頁面超過了瀏覽器窗口的大小，瀏覽器會自動生成一個滾動條七蜘。這個滾動條是屬于誰的谭溉？是屬于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下，滾動條的表現(xiàn)形式不太一樣豌鹤，只有滾動的時候才會出現(xiàn)滾動條亡哄，沒有滾動時自動隱藏)

另一種方法是可以通過對元素添加scroll監(jiān)聽事件來判斷。

如果是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事件的監(jiān)聽就可以發(fā)現(xiàn)，滾動的時候并不會觸發(fā)html元素或者body元素的scroll事件舔痪。

//監(jiān)聽window窗口的滾動事件
window.addEventListener('scroll', (e) => {
    console.log('window');
})
//監(jiān)聽document對象的滾動事件
document.addEventListener('scroll', (e) => {
    console.log('document');
})
//監(jiān)聽html元素的滾動事件
document.documentElement.addEventListener('scroll', (e) => {
    console.log('html');
})
//監(jiān)聽body元素的滾動事件
document.body.addEventListener('scroll', (e) => {
    console.log('body');
})

上面的四個監(jiān)聽器寓调，滾動的時候只有前兩個才會被觸發(fā)，所以證明滾動條是屬于document對象的锄码。

為什么window也能監(jiān)聽到scroll事件呢夺英？這是因為事件冒泡

當html元素也添加overflow:auto時，滾動條會是誰的呢滋捶？看例子demo03

這時痛悯，滾動條貌似是屬于body的？是的沒錯重窟，就是屬于body的载萌，用監(jiān)聽器來監(jiān)聽一下滾動事件，只會觸發(fā)document.body的監(jiān)聽器巡扇，而不會觸發(fā)window和document的扭仁。

為什么會這樣？應該不僅只有我一個人才發(fā)現(xiàn)滾動條這個坑的吧厅翔？TAT

先來回顧一下overflow有哪些值：

/* 默認值乖坠。內容不會被修剪，會呈現(xiàn)在元素框之外*/
overflow: visible;

/* 內容會被修剪刀闷，并且其余內容不可見 */
overflow: hidden;

/* 內容會被修剪熊泵，瀏覽器會顯示滾動條以便查看其余內容 */
overflow: scroll;

/* 由瀏覽器定奪，如果內容被修剪涩赢，就會顯示滾動條 */
overflow: auto;

/* 規(guī)定從父元素繼承overflow屬性的值 */
overflow: inherit;

于是得出結論(也可以說個人猜測戈次，因為不一定正確)：

html和body僅有一個元素會產生滾動條時轩勘，這個滾動條會默認歸屬于document

當html和body元素的overflow屬性都是默認值auto時筒扒，因為body高度可能超過html的高度，這時就會產生一個滾動條绊寻，這個滾動條屬于document的花墩，所以如果body再產生一個滾動條，就只能是屬于body自己的了澄步。

鼠標滾輪事件

頁面出現(xiàn)滾動條時冰蘑，我們可以用鼠標滾輪來對頁面進行縱向滾動，那是否可以組織這個滾動行為呢村缸？

肯定是可以的祠肥。e.preventDefault()就是阻止事件的默認行為，在mousewheel事件監(jiān)聽里加上這句梯皿，就能阻止鼠標滾輪觸發(fā)滾動事件了仇箱。

戳栗子demo04

因為這個县恕，讓我在組件源碼里折騰了好一會，當然不是不知道e.preventDefault()剂桥，是忽略了它的作用忠烛。

因為工作忙，這篇文章前后寫了好久权逗，當時的一些思路靈感都已經消逝了美尸，寫不下去了，先到這為止吧斟薇，之后有想起什么遺漏的再補上师坎。