Customizing Scrollbar Styles with CSS

Introduction

In this lab, we will be exploring how to customize the scrollbar style using CSS. We will use the ::-webkit-scrollbar property to style the scrollbar, including the scrollbar track and thumb. By the end of this lab, you will have a better understanding of how to create custom scrollbars and enhance the user experience of your website.

Skills Graph

Custom Scrollbar

index.html and style.css have already been provided in the VM.

To customize the scrollbar style for elements with scrollable overflow, you can use ::-webkit-scrollbar to style the scrollbar element, ::-webkit-scrollbar-track to style the scrollbar track (the background of the scrollbar), and ::-webkit-scrollbar-thumb to style the scrollbar thumb (the draggable element). However, note that this technique only works on WebKit-based browsers, and scrollbar styling is not on any standards track. Here is an example of how to use these selectors in HTML and CSS:

<div class="custom-scrollbar">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>

.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #1e3f20;
  border-radius: 12px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #4a7856;
  border-radius: 12px;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Custom Scrollbar lab. You can practice more labs in LabEx to improve your skills.