如何更改滚动条的样式？

Question

我有一个带溢出滚动的div，我想改变滚动条的样式，如下图所示：

如何更改滚动条？

<div id="box" style="overflow:auto; width:200px; height:200px; border:1px solid black;">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
</div>

Answer 1

 For IE:
   body {
        scrollbar-face-color: #b46868;
   }

For webkit

::-webkit-scrollbar-track {
  background-color: #b46868;
} /* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); 
 } /* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
  background-color: #7c2929;
 } /* optionally, you can style the top and the bottom buttons
(left and right for horizontal bars) */

::-webkit-scrollbar-corner {
  background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps
the right bottom corner also needs to be styled *

您可以使用fleXcroll更改滚动。

请检查：http://www.hesido.com/web.php?page=customscrollbar

https://webdesign.tutsplus.com/articles/quick-tip-styling-scrollbars-to-match-your-ui-design--webdesign-9430

Answer 2

使用这些选择器，您可以在CSS中自定义滚动条...

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

例如：

::-webkit-scrollbar-track{
    width: 12px;
}

试试吧