預設滾動條樣式如下：

那如何修改呢？如下程式碼：

<div class="inner">         <div class="innerbox">         <p style="height:200px;">這是內容111</p>         <p style="height:400px;">這裡是內容222</p>         <p>這裡是內容333</p>     </div>

</div>

.inner{             width: 265px;             height: 400px;             position: absolute;             top: 33px;             left: 13px;             overflow:hidden;         }         .innerbox{             overflow-x: hidden;             overflow-y: auto;             color: #000;             font-size: .7rem;             font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑體",Arial,Tahoma;             height: 100%;         }         /*滾動條樣式*/         .innerbox::-webkit-scrollbar {             width: 4px;                 /*height: 4px;*/         }         .innerbox::-webkit-scrollbar-thumb {             border-radius: 10px;             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);             background: rgba(0,0,0,0.2);         }         .innerbox::-webkit-scrollbar-track {             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);             border-radius: 0;             background: rgba(0,0,0,0.1);

        }

效果顯示如圖：

下面就講解滾動條几個屬性，主要有下面7個屬性

1. ::-webkit-scrollbar 滾動條整體部分，可以設定寬度啥的
2. ::-webkit-scrollbar-button 滾動條兩端的按鈕
3. ::-webkit-scrollbar-track  外層軌道
4. ::-webkit-scrollbar-track-piece  內層滾動槽
5. ::-webkit-scrollbar-thumb 滾動的滑塊
6. ::-webkit-scrollbar-corner 邊角
7. ::-webkit-resizer 定義右下角拖動塊的樣式