示例

效果

CSS

mydiv{max-height:910px;overflow:auto;} mydiv::-webkit-scrollbar{width:8px;height:8px;background-color: #61B6EB; } mydiv::-webkit-scrollbar-track{background: #213147;border-radius:2px; } mydiv::-webkit-scrollbar-thumb{background: #61B6EB;border-radius:2px; } mydiv::-webkit-scrollbar-thumb:hover{background: #61B6EB; } mydiv::-webkit-scrollbar-corner{background: #61B6EB; }

參數說明

::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-thumb 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條） ::-webkit-scrollbar-track 滾動條的軌道（里面裝有Thumb） ::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕，允許通過點擊微調小方塊的位置。 ::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去） ::-webkit-scrollbar-corner 邊角，即兩個滾動條的交匯處 ::-webkit-resizer 兩個滾動條的交匯處上用于通過拖動調整元素大小的小控件

總結

以上是生活随笔為你收集整理的div自定义设置滚动条样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。