CSS深刻理解之overflow（HTML/CSS）

簡介

overflow看上去其貌不揚，其中蘊含的知識點仍是不少的,有不少不爲人知的特性表現。

 

overflow基本屬性值

一、visible（默認）

二、hidden

三、scroll

四、auto

五、inherit

 

body/html與滾動條

不管什麼瀏覽器，默認滾動條均來自html標籤，而不是body標籤。由於新建一個空白html頁面，body默認有margin值，若是滾動條來自body，則應該有邊距，而不是緊貼着瀏覽器的邊緣。

 

body/html與滾動條（滾動高度）

Chrome瀏覽器：document.body.scrollTop

其餘瀏覽器：document.documentElement.scrollTop

目前二者不會同時存在，所以建議寫法爲：var st = document.documentElement.scrollTop || document.body.scrollTop

 

滾動條的寬度機制

因爲滾動條會佔用容器的可用寬度和高度，所以可能會致使本來和諧的佈局，滾動條出現後直接掛掉。

獲取滾動條寬度：