Css customized scroll bar in div

html

responsive-design

css

performance

byAnton Shumikhin·Nov 24, 2024

To customize a div's scrollbar, you can use ::-webkit-scrollbar and its related pseudo-elements in CSS. This approach works perfectly for webkit-based browsers. Let's look at a syntax-level example:

/* Set scrollbar size and background */
div::-webkit-scrollbar {
  width: 10px;
}

/* For the movable part of the scrollbar */
div::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* Changes upon hovering over the scrollbar */
div::-webkit-scrollbar-thumb:hover {
  background: #555; /* because darker is the new cool */
}

Just make sure to wrap your overflowing content in a div, like so:

<div style="height: 200px; overflow-y: auto;">
  <!-- Always room for one more! -->
</div>

Quick and easy, just like microwave popcorn. But to conquer all browsers, you'll need additional CSS for non-webkit ones.

Cross-browser compatibility & techniques

The ::-webkit-scrollbar is super likeable, like cute kittens, in browsers like Chrome, Safari, and newer Edge players, but how well does it get along with the other browsers like Firefox or IE?

Firefox

In Firefox, meet the scrollbar-color and scrollbar-width properties. Not quite the popular kids but they get the job done with fewer styling controls.

/* Firefox scrollbar solution, because Mozilla can be cool too */
div {
  scrollbar-color: darkgrey lightgrey;
  scrollbar-width: thin;
}

Internet Explorer

For IE8 and beyond, Microsoft has been kind to allow proprietary properties for scrollbar styling. Effective, yes, but they got ghosted in the standard-compliant web world.

The JavaScript way

Are you a stickler for uniformity across all browsers? Then JavaScript libraries, like "niceScroll", are just your jam. They specialize in creating a unified scrollbar look across platforms.

$(document).ready(function() {  
  $("div").niceScroll({
    cursorcolor: "#888",
    cursorwidth: "10px",
    cursorborder: "1px solid #555",
    cursorborderradius: "5px"
  });
}); /* custom scrollbars, unleash the Samurai! */

This little script should snugly fit within a <script> tag, post your content-load. "niceScroll" specifically targets your div without changing other page scrollbars, keeping your site's scroll dynamics untouched.

Flexibilizing designs with CSS

You can leverage linear-gradient, box-shadow, and even border-image for an even jazzier scrollbar:

/* Adding a color gradient to your scrollbar track */
div::-webkit-scrollbar-track {
  background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,0));
}

/* Keep 'em shadows and transitions for an element of surprise */
div::-webkit-scrollbar-thumb {
  background-color: #999;
  box-shadow: inset 0 0 10px #000000;
  transition: background-color 0.3s ease;
}

For user-interactive UI, hover states work wonders.

Stay aware of challenges

If your scrollbar's width resembles Hulk, content layout shifts might occur. Thorough testing on multiple devices is the elixir here.

Keep check on Performance

While we love custom scrollbars, we definitely hate a slow page. So, while JavaScript libraries are great, don't flood your page performance. Think of it as a light beer—same fun, less of the guilt.

explain-codes / Html / Css customized scroll bar in div

Linked

How can I style horizontal scrollbar by CSS?



Making the main scrollbar always visible



Remove scrollbars from textarea



Css div element - how to show horizontal scroll bars only?



Prevent scroll-bar from adding-up to the Width of page on Chrome

