css滚动条使用

1、实现滚动条

给DIV限定宽度或高度,并指定overflow样式为auto,这样当内空超出后就会自动出现滚动条了.如

<div style="width:100%; height: 99%; overflow:auto;">
    <img src="xxx" style="width:300px; height:300px;">
</div>

正常来说 我们宽度都是设置为 百分百的，高度给百分之90这样，加上overflow:auto 这个属性 滚动条就可以出来了

小知识：

设置滚动条显示：overflow :yes 设置滚动条自适应显示：overflow :auto 设置上下滚动条显示：overflow-y :yes 设置上下滚动条自适应显示：overflow-y :auto

滚动条出来了 肯定不好看（于是我们就有了隐藏滚动条的属性）

如果要想X横向隐藏滚动条，

只需要设置overflow-x:visible或overflow-x:hidden；

如果想Y纵向滚动条隐藏可以设置

CSS样式overflow-y:visible或overflow-y:hidden即可隐藏滚动条。

<div style="width:100%; height: 99%; overflow:auto; overflow-x:visible; ">
    <img src="xxxx" style="width:300px; height:300px;">
</div>

或者直接使用

::-webkit-scrollbar {  // 去除滚动条
    width: 0px;
    height: 1px;
}
::-webkit-scrollbar-thumb { // 去除滚动条
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}