CSS Custom Scrollbar for Div

Programming / By /

In the realm of front-end development, customizing scrollbars for <div> elements can significantly enhance the user interface and overall user experience. By default, scrollbars rendered by browsers are quite basic and sometimes do not match the aesthetic design of a web application. Fortunately, CSS provides developers with the tools needed to create visually appealing and functional custom scrollbars.

Understanding Scrollbar Properties

The primary properties that allow customization of scrollbars in CSS are part of what is known as “scrollbar pseudo-elements.” These pseudo-elements enable granular control over various parts of the scrollbar, such as its track, thumb, buttons (arrows), and corner.

  • ::-webkit-scrollbar: Represents the whole scrollbar.
  • ::-webkit-scrollbar-thumb: Refers to the draggable part of the scrollbar.
  • ::-webkit-scrollbar-track: Refers to the track in which the thumb slides.
  • ::-webkit-scrollbar-button: The directional buttons at each cessation of a scrollbar track.
  • ::-webkit-scrollbar-corner: The bottom-right corner where horizontal and vertical scrollbars meet.

These pseudo-elements primarily target WebKit-based browsers (e.g., Google Chrome and Safari). For Firefox, different pseudo-elements (scrollbar-width and scrollbar-color) must be used.

Basic Styling Examples

Here is an example demonstrating how to apply custom styles to a scrollbar within a specific <div> element:

/* Targeting WebKit-based browsers */
.custom-scroll-div {
  width: 300px;
  height: 200px;
  overflow-y: scroll; /* Ensure vertical scrolling */
}

.custom-scroll-div::-webkit-scrollbar {
  width: 12px; /* Width of vertical scrollbar */
}

.custom-scroll-div::-webkit-scrollbar-thumb {
  background-color: #888; /* Color of scrollbar thumb */
  border-radius: 6px;     /* Roundness/additional styling */
}

.custom-scroll-div::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Background color of track */
}

/* Targeting Firefox */
.custom-scroll-div {
  scrollbar-width: thin;          /* Thin width for all directions */
  scrollbar-color: #888 #f1f1f1; /* Thumb color | Track color*/
}

In this example:
– The .custom-scroll-div class is applied to any <div> that requires a custom scrollbar.
– For WebKit-based browsers, one sets explicit styles for each part using :: -webkit-*.
– For Firefox, shorthand properties like scrollbar-width and scrollbar-color manage most styling needs.

Advanced Customization Techniques

To add more sophisticated designs or animations:

/* Adding hover effects for thumb */
.custom-scroll-div:hover::-webkit-scrollbar-thumb {
  background-color: #555;
}

/* Adding gradient backgrounds or images */
/* Thumb with gradient background */
.custom-scroll-div::-webkit-scrollbar-thumb {
    background-image: linear-gradient(45deg,
                                      rgba(255,0,150,.9),
                                      rgba(0,204,255,.9));
}

These advanced styles ensure that users have visual feedback during interactions with scroll elements. Such enhancements include hover states or adding gradients/images for more dynamic visual effects.

Implementing Cross-Browser Compatibility

Ensuring cross-browser compatibility remains essential in professional web development. Here’s an approach combining both WebKit-specific styles and general CSS:

<style>
/* Apply CSS variables for easy theming/changing */

body {
   --main-bg-color:#F3F4F8;
   --main-hover-bg:#C5CAE9;
   --main-thumb-hover:#757DE8;
   --main-border-radius:10px;
}

.scroll-container{
    height:auto;
    max-height:400px;
    overflow-y:auto;

    /* For Non-Webkit Browsers (like Firefox) */
    -ms-overflow-style:none; 
    scrollbar-width:auto;
}

/* Style Scroll Container Elements */

/* Remove default Arrow Buttons on Internet Explorer*/
.scroll-container:-ms-autohiding-scroolbox::right{
 display:none!important;}

 .scroll-container:hover::right{
 display:none;}

.scroll-container:hover{
 cursor:pointer;}
/*Styling Pseudo Elements*/
/********FOR NON WEBKIT********/
 .scroll-container{ 
   &::track{background-var(--main-bg-color); margin-block-.5rem}
&::thumb{backgroundcolor:(--main-border-radius); padding:.5rem;}
&::thumb-hover{bgcolor--var(--main-thumb-hover); transition:.2s;}
 }

/*************WEBKIT BROWSERS**********/

 .scroll-container{-web-kit-scroollbox:none;} 

.scroll-container:hover{-web-kit-transition:.3s;-moz-transition:.3s;-o-transition.transition:-.3s;}

 .container ::web-kit scroolbox-thumbs{backgroundcolor--var(--hover-main-bg);}
.container ::web-kit thmb-background-hover{transition-duration:-cubic-bezier(.84,-9999,.84,-9999)}


</style>
<div class="container">
<p>Lorem Ipsum</p></div>

In this example:

Here we combined numerous browser support into single conditional tags while applying general css practices with defaults if these weren’t supported particularly older IE/Edge versions

By employing these advanced techniques developers can craft unique user experiences ensuring their websites/applications stand out aesthetically while maintaining functionality seamlessly across board.

Further Study

To enrich knowledge further:
Consider consulting official documentation from MDN web docs regarding “Webkit Pseudo selectors” alongside modern frontier frameworks such as TailwindCSS/VueJS further sophisticated integratoins adaptable quickly changing web dev environments today!

Related Posts