Scrollbars

—

by

in 01. Tutorials

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.

Comments

Leave a Reply Cancel reply