CSS深入理解之overflow(HTML/CSS)
阿新 • • 發佈:2017-12-31
clas alt span doc 邊距 蘊含 top overflow 會同
簡介
overflow看上去其貌不揚,其中蘊含的知識點還是很多的,有很多鮮為人知的特性表現。
overflow基本屬性值
1、visible(默認)
2、hidden
3、scroll
4、auto
5、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
滾動條的寬度機制
由於滾動條會占用容器的可用寬度和高度,因此可能會導致原本和諧的布局,滾動條出現後直接掛掉。
獲取滾動條寬度:
CSS深入理解之overflow(HTML/CSS)