一、overflow特征
overflow-x:hidden;/ overflow-y:hidden;
,当一方被隐藏的时候,另一方会自动变成visible;- IE7浏览器下,文字越多的时候,按钮两侧的
padding
空白会越大。解决方法:给所有按钮添加overflow:visible;
二、overflow与滚动条
- 无论什么浏览器,默认滚动条来自于HTML,而不是body。
- 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;
}
后排提示:之前在慕课看到了这个系列的教程,来自于张鑫旭老师,有兴趣的朋友可以搜索看看,本人在此做一个学习记录。