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

 

滚动条的宽度机制

因为滚动条会占用容器的可用宽度和高度，所以可能会致使本来和谐的布局，滚动条出现后直接挂掉。

获取滚动条宽度：