深入理解之overflow属性（第五期）

一、overflow特征

1. overflow-x：hidden;/ overflow-y：hidden;，当一方被隐藏的时候，另一方会自动变成visible；
2. IE7浏览器下，文字越多的时候，按钮两侧的padding空白会越大。解决方法：给所有按钮添加overflow：visible;

二、overflow与滚动条

1. 无论什么浏览器，默认滚动条来自于HTML，而不是body。
2. body/html与滚动条:
   (1) Chrome浏览器下JS获取滚动条：document.body.scrollTop;
   (2)其它浏览器：document.documentElement.scrollTop;
   (3) 两者不会同时起作用，建议的兼容使用写法:
   var st=document.documentElement.ScrollTop||document.body.scrollTop;
   3.解决水平居中时滚动条跳动的问题

.html{
	overflow-y:Scroll;
}
.container{
	padding-ledt:calc(100vm-100%);
}

三、自定义滚动条

常用:

::-webkit-scrollbar{/*血槽宽度*/
	width:8px;
	height:9px;
}
::-webkit-scrollbar-thumb{/*拖动条*/
	background-color:rgba(0,0,0,.3);
	border-radius:6px;
}
::-webkit-scrollbar-track/*背景槽*/
	border-radius:6px;
	background-color:#ddd;
}

后排提示：之前在慕课看到了这个系列的教程，来自于张鑫旭老师，有兴趣的朋友可以搜索看看，本人在此做一个学习记录。