正确滚动条的使用

 纵向设置滚动条

overflow-y: scroll

 　　下面2个div占据屏幕宽度一半，将右边设置滚动条（滑动滚动条时，左边部分不动）

　　

 

　　<div id="container">

　　　　<div id="left"></div>

　　　　<div id="right">

　　　　...

　　　　</div>

　　</div>

css如下

　　style{

　　　　html，body，#container，#right{
　　　　　　height: 100%;

　　　　　　/*设高时必须每一级都设置高，设到html为止*/

　　　　}

　　　　#right{

　　　　　　overflow-y: auto;

　　　　　　/*在想给滚动条的div中设置*/

　　　　}

　　}

 

 横向设置滚动条

overflow-x: scroll　

　　<div></div>

　　<div id="scroll">

　　　　<div id="width">...</div>

　　</div>

下面的div使他横向滑动，但是整个屏幕不动

 

css如下

　　style{

　　　　#scroll{

　　　　　　overflow-x: scroll;

　　　　}

　　　　#width{

　　　　　　 10000px;

　　　　}

　　}

 

总结为八字真理------“先设滑动后设宽高”

在设置宽时可以设置一个固定值；

但是设置高时一定要从html开始设置100%高使得布局美观

 

overflow: auto;和overflow: scroll;的区别

前者自动给滚动条，在长宽不够时滚动条消失。

而后者是给滚动条，不论内容大小（内容撑不起时显示一个边框）。

 

补充：

滚动条隐藏：

　　给需要滚动的元素添加伪选择器，::-webkit-scrollbar{0;}，

　　将宽度设为0，滚动条就会隐藏。