CSS - Scrollbars



Scrollbars are UI elements that allow users to navigate through long content that doesn't fit entirely within the visible area. They consist of vertical or horizontal bars with a draggable thumb, enabling users to move the content up and down or left to right.

It is important to test your scrollbar styling in different browsers and devices to make sure it works as expected.

How to style scrollbars

  • Create a container element, such as div, to hold the content and the scrollbar.

  • Set the height of the container element to a fixed value.

  • Add the overflow: auto property to the container element to enable the scrollbar.

  • Use the :-webkit-scrollbar pseudo-element to style the scrollbar.

  • Customize the scrollbars using CSS properties ( width, height, background-color, border, border-radius).

CSS Scrollbar

The following example demonstrates how to create a basic scrollbar using the -webkit-scrollbar CSS pseudo-element −

<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: #888; 
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #555; 
   }
   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>  

CSS Scrollbar - With Styling

The following example demonstrates how to style scrollbars using the -webkit-scrollbar pseudo-element to customize their appearance by adding colors, width, border and border-radius −

<html>
<head>
<style>
   div {
      width: 370px;
      height: 120px;
      background-color: #F1EFB0;
      overflow: auto; 
   }
   div::-webkit-scrollbar {
      width: 15px;
   }
   div::-webkit-scrollbar-track {
      background: #90e9e4;
   }
   div::-webkit-scrollbar-thumb {
      background: #e77f7f;
      border-radius: 10px;
      border: 3px solid yellow;
   }
   div::-webkit-scrollbar-thumb:hover {
      background: #da3e3e; 
   }
   .heading{
      color: #DC4299;
      text-align: center;
   }
</style>
</head>
<body>
   <div>
      <h3 class="heading">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> 

CSS Scrollbar - Related Properties

Following is the list of CSS properties related to scrollbar:

property value
overflow-block Determines how the content of an element behaves when it is too wide to fit inside its container.
overflow-inline Determines how content is displayed when it overflows the left and right edges of an element.
overflow-x Display overflowing content in the horizontal direction.
overflow-y Display overflowing content in the vertical direction.
overflow Display overflowing content in the vertical direction.
overflow-clip-margin Determines how far the content of an element can overflow its box before being clipped.
scrollbar-color Sets the color of the scrollbar.
scrollbar-width Sets the width of the scrollbar.
scrollbar-gutter To reserve space for the scrollbar.
scroll-behavior To ensure smooth scrolling when a user clicks on a link or scrolls through a page.
scroll-margin Defines the margin of an element within the snap area.
scroll-padding Defines the margin of an element within the snap area.
scroll-snap-align Specifies how an element should be aligned within its scroll container.
scroll-snap-stop To stop the the scroll container at snap points.
scroll-snap-type Specifies how the scroll container snaps to snap positions.
:-webkit-scrollbar To style the scrollbar in a variety of ways.
Advertisements