HTML and CSS

How to create a custom scrollbar with CSS. 

Learn how to create a custom scrollbar with CSS.
Learn how to create a custom scrollbar with CSS.

CSS scrollbars styling, learn about the old and new way to style custom scrollbars in CSS. In this tutorial you will: Learn the native CSS properties available for styling a scrollbar in the browser; Create unique scrollbars using CSS.  You can customize the scrollbar with a bit of CSS easily. Learn how to do it with a step-by-step explanation.

HTML

 <div class="xyz outer-wrapper"></div>

CSS

.outer-wrapper {
    max-width: 100vw;
    overflow-x: scroll;
    position: relative;
    scrollbar-color: #656565 #9c9c9c;
    scrollbar-width: thin;
    -ms-overflow-style: none;
  }
    
  .outer-wrapper::-webkit-scrollbar {
    height: 5px;
  }
  
  .outer-wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
  }
  
  .outer-wrapper::-webkit-scrollbar-thumb {
    height: 5px;
    background-color: #7f7f7f;
  }
  
  .outer-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #6b6b6b;
  }
  
--------------------------------------------------
Hide For vertical scrollbar
  .outer-wrapper::-webkit-scrollbar:vertical {
    display: none;
  }

Custom Scrollbars In CSS

The CSS scrollbars styling module defines properties that you can use for visual styling of scrollbars.  CSS Scrollbar Selectors. You can use the following pseudo-elements to customize various parts of the scrollbar for WebKit browsers::: -webkit-scrollbar-track, -webkit-scrollbar-thumb, -webkit-scrollbar-thumb:hover, -webkit-scrollbar:vertical.

How to create a custom scrollbar using CSS ?, Create a container element that will hold the content and the scrollbar.  Note: The -webkit-scrollbar is not supported in Firefox or in Edge browser. Having a custom scrollbar can help tie the branding of a site together on the page, as well as help it match an app as well, and it’s really help.

::-webkit-scrollbar {
  width: 3px;
}

 ::-webkit-scrollbar-track {
  background: #888;
}

 ::-webkit-scrollbar-thumb {
  background: #888;
}

 ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

How to create a custom scrollbar using CSS

Firstly, we set the. scrollbar (class) width, height, background-color , then set overflow-y: scroll to get the vertical or horizontal scrollbar. able to get the scrollbar to appear by setting the style on the wrapper to “width 100%”. The default scrollbar is often dull and might look out of place, detracting from the overall aesthetics. How to re-create the CSS Tricks Scrollbar · How to style a scrollbar · Observations ·

  • 1. Width of the scrollbar 
  • 2. Scrollbar Buttons
  • 3. Coloring
  • 4 Hide scroll bar Cross-browser

You can use the following pseudo-elements to customize various parts of the scrollbar for WebKit browsers:

  • ::-webkit-scrollbar — the entire scrollbar.
  • ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time).
  • ::-webkit-scrollbar:horizontal{} — the horizontal scrollbar.
  • ::-webkit-scrollbar-thumb — the draggable scrolling handle.
  • ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar.
  • ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
  • ::-webkit-scrollbar:vertical{} — the vertical scrollbar.
  • ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.
  • ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.

We can use the CSS “::-webkit-scrollbar” property, which is responsible for changing the shape, color, size, shade, shadow, etc. of the scrollbar. Customize Scrollbar In Any Website Using CSS.


Learn HTML/CSS from W3 School Website