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);
}