CSS - ::-webkit-scrollbar Property

CSS ::-webkit-scrollbar Pseudo-element

CSS ::-webkit-scrollbar pseudo-element is used to style the scrollbar of an element. It is a non-standard CSS property that is only supported by WebKit-based browsers, such as Chrome, Safari, and Edge.

The following ::-webkit-scrollbar pseudo-element can be used to style the scrollbar:

  • ::-webkit-scrollbar-track − To style (border, background-color.) the track of the scrollbar.

  • ::-webkit-scrollbar-thumb − To style the thumb (draggable scrolling handle) of the scrollbar.

  • ::-webkit-scrollbar-button − To style the buttons (arrows pointing upwards and downwards that scroll one line at a time) of the scrollbar.

  • ::-webkit-scrollbar-corner − To style the corner of the scrollbar where the horizontal and vertical scrollbars meet.

  • ::-webkit-resizer − The draggable resizing handle that appears at the bottom corner of some elements.

  • ::-webkit-scrollbar:horizontal{} − To style the horizontal scrollbar of an element.

  • ::-webkit-scrollbar:vertical{} − To style the vertical scrollbar of an element.

  • ::-webkit-scrollbar-track-piece − To style the part of the track (progress bar) not covered by the handle.

The following diagram demonstrates the scroll webkit structure for reference:

scroll webkit structure

The following example demosrates how to use the -webkit-scrollbar CSS pseudo-element to change the look of scrollbars in WebKit browsers, such as Safari and Chrome −

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      scrollbar-color: #8b8484 #ddd; 
      scroll-margin-block-end: 20px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track {
      background: #f1f1f1; 
   }
   div::-webkit-scrollbar-thumb {
      background: #f02222;  
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #f55d5d;
   }
   h3 {
      color: #DC4299;
   }
</style>
</head>
<body>
   <div>
      <h3>Scrollbars using -webkit-scrollbar</h3>
      This block includes a large amount of content to demonstrate how scrollbars work when there is an overflow within an element box. 
      They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.
   </div>
</body>
</html>

The following example demonstrates how to use the ::-webkit-scrollbar-button pseudo-element to style the scrollbar buttons of an element. The scrollbar buttons are the two arrows at the top and bottom of the scrollbar.

<html>
<head>
<style>
   div {
      width: 370px;
      height: 150px;
      scrollbar-color: #8b8484 #ddd; 
      scroll-margin-block-end: 20px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track {
      background: #f1f1f1; 
   }
   div::-webkit-scrollbar-thumb {
      background: #888; 
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #555; 
   }
   div::-webkit-scrollbar-button {
      height: 30px;
      background-color: rgb(19, 201, 19); 
      border: 2px solid rgb(245, 9, 155);
      border-radius: 20px;
   }
   h3 {
      color: #DC4299;
   }
</style>
</head>
<body>
   <div>
      <h3>Scrollbars using -webkit-scrollbar</h3>
      This block includes a large amount of content to demonstrate how scrollbars work when there is an overflow within an element box. 
      They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.
   </div>
</body>
</html>

You can use the ::-webkit-scrollbar pseudo-element to style any of the properties of the vertical scrollbar, such as its color, width, border, and border-radius.

Here is an example −

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      scrollbar-color: #8b8484 #ddd; 
      scroll-margin-block-end: 20px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track:vertical {
      background: #f1f1f1; 
   }
   div::-webkit-scrollbar-thumb:vertical {
      background: rgb(16, 230, 16);
      border-radius: 15px;
   }
   div::-webkit-scrollbar-thumb:vertical:hover {
      background: rgb(224, 44, 209); 
   }
   h3 {
      color: #DC4299;
   }
</style>
</head>
<body>
   <div>
      <h3>Scrollbars using -webkit-scrollbar</h3>
      This block includes a large amount of content to demonstrate how scrollbars work when there is an overflow within an element box. 
      They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.
   </div>
</body>
</html>

You can style the track piece of the vertical scrollbar of an element using the ::-webkit-scrollbar-track-piece pseudo-element.

Here is an example −

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      scrollbar-color: #8b8484 #ddd; 
      scroll-margin-block-end: 20px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track-piece {
      background-color: rgb(91, 210, 214);  
   }
   div::-webkit-scrollbar-thumb {
      background: rgb(21, 160, 21);
      border-radius: 10px; 
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #e449dc; 
   }
   h3 {
      color: #DC4299;
   }
</style>
</head>
<body>
   <div>
      <h3>Scrollbars using -webkit-scrollbar</h3>
      This block includes a large amount of content to demonstrate how scrollbars work when there is an overflow within an element box. 
      They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.
   </div>
</body>
</html>

Here is an example of how to style scrollbars in WebKit-based browsers using -webkit-scrollbar CSS properties such as box-shadow and background-color, and border −

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track {
      box-shadow: inset 0 0 10px rgb(128, 197, 207);
   }
   div::-webkit-scrollbar-thumb { 
      border: 1px solid #e21111;
      background-color: #2ce43b; 
      border-radius: 5px; 
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #e045c7; 
      border: 1px solid #11e22d;
   }
   h3 {
      color: #DC4299;
   }
</style>
</head>
<body>
   <div>
      <h3>Scrollbars using -webkit-scrollbar</h3>
      This block includes a large amount of content to demonstrate how scrollbars work when there is an overflow within an element box. 
      They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.
   </div>
</body>
</html>
Advertisements