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
滚动条的宽度机制
由于滚动条会占用容器的可用宽度和高度,因此可能会导致原本和谐的布局,滚动条出现后直接挂掉。
获取滚动条宽度:
来源: http://www.bubuko.com/infodetail-2446059.html