HTML-CSS: Custom scrollbar

Last update on March 08 2024 13:34:57 (UTC/GMT +8 hours)

HTML-CSS : Exercise-20 with Solution

Using HTML, CSS customizes the scrollbar style for elements with scrollable overflow.

Use ::-webkit-scrollbar to style the scrollbar element.
Use ::-webkit-scrollbar-track to style the scrollbar track (the background of the scrollbar).
Use ::-webkit-scrollbar-thumb to style the scrollbar thumb (the draggable element).
Note: Scrollbar styling doesn't appear to be on any standards track. This technique only works on WebKit-based browsers.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS customizes the scrollbar style for elements with scrollable overflow</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="w3rcontainer"><!-- Comment: Defines a container for the content -->
<div class="custom-scrollbar"><!-- Comment: Defines a container with custom scrollbar styling -->
<p><!-- Comment: Defines a paragraph element -->
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br /><!-- Comment: Adds some lorem ipsum text -->
    Iure id exercitationem nulla qui repellat laborum vitae, <br /><!-- Comment: Adds some lorem ipsum text -->
    molestias tempora velit natus. Quas, assumenda nisi. <br /><!-- Comment: Adds some lorem ipsum text -->
    Quisquam enim qui iure, consequatur velit sit? <!-- Comment: Adds some lorem ipsum text -->
</p><!-- Comment: End of the paragraph -->
</div><!-- Comment: End of the custom scrollbar container -->
</div><!-- Comment: End of the content container -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code represents a basic webpage structure with a container div and custom scrollbar styling.
The  comment indicates the license information for the code.
<!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
<html> marks the start of the HTML document.
<head> contains meta-information about the HTML document, such as character encoding and viewport settings.
The <title> element sets the title of the webpage.
<body> contains the content of the HTML document.
<div class="w3rcontainer"> defines a container for the content.
<div class="custom-scrollbar"> defines a container with custom scrollbar styling.
Within the custom scrollbar container, there is a <p> element containing Lorem Ipsum text.
The content within the <p> element consists of several lines of Lorem Ipsum text, separated by <br /> tags for line breaks.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
.w3rcontainer{ /* Comment: Defines styles for the container with the class "w3rcontainer" */
   border: 1px solid #cccfdb; /* Comment: Sets border properties for the container */
   border-radius: 2px; /* Comment: Sets border radius to create rounded corners for the container */
}

.custom-scrollbar { /* Comment: Defines styles for elements with the class "custom-scrollbar" */
  height: 70px; /* Comment: Sets the height of the element */
  overflow-y: scroll; /* Comment: Specifies vertical scrolling behavior */
}

.custom-scrollbar::-webkit-scrollbar { /* Comment: Defines styles for the scrollbar in webkit browsers */
  width: 8px; /* Comment: Sets the width of the scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track { /* Comment: Defines styles for the track of the scrollbar */
  background: #1E3F20; /* Comment: Sets background color for the scrollbar track */
  border-radius: 12px; /* Comment: Sets border radius for the scrollbar track */
}

.custom-scrollbar::-webkit-scrollbar-thumb { /* Comment: Defines styles for the thumb of the scrollbar */
  background: #CC7856; /* Comment: Sets background color for the scrollbar thumb */
  border-radius: 12px; /* Comment: Sets border radius for the scrollbar thumb */
}
</style> /* Comment: End of the CSS styling */

Explanation:

The CSS code customizes the scrollbar style for elements with scrollable overflow.
.w3rcontainer styles the container with a border and rounded corners.
.custom-scrollbar styles the elements with a scrollbar by setting a fixed height and enabling vertical scrolling.
::-webkit-scrollbar targets the scrollbar specifically for webkit browsers like Chrome and Safari.
::-webkit-scrollbar-track styles the track of the scrollbar with a background color and rounded corners.
::-webkit-scrollbar-thumb styles the thumb (the draggable part) of the scrollbar with a background color and rounded corners.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.