DEV Community

Cover image for Customizing the scrollbar with CSS
Nikki
Nikki

Posted on • Originally published at nikkipeel.netlify.app

Customizing the scrollbar with CSS

#css #webdev #tutorial #beginners

Have you ever noticed the intricacies of the websites you visit? You can style just about every pixel of it, including the scrollbar. I was curious about how to go about this and found that it could be accomplished with just a few lines of CSS.

Here's what we'll build in Codepen:

Alt Text

Link to the final project: CodePen

Three boxes containing overflowing text content will all be scrollable but styled differently. The first <section> will have content be scrollable while the scrollbar itself is hidden. The second <section> will have a styled scrollbar that is always visible. The third <section> will have a styled scrollbar but only display it when the <section> is focused upon.

Create the three sections with text content

First, create three <section> elements and within those sections create a paragraph containing a long string of text (I used 4 paragraphs of dummy text, enough to create overflow). I also chose to label each <section> with an <h1>:

<section>
  <h1>Hidden</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>

<section>
  <h1>Styled</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>

<section>
  <h1>Hidden-until-focused</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
    <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>
Enter fullscreen mode Exit fullscreen mode

Create base styles with CSS

Next, you'll want to create some basic styling:

:root {
  --white: #f8f5f2;
  --teal: #00E8F0;
  --magenta: #CC0088;
  --purple: #54086B;
  --gradient: linear-gradient(to top left, var(--purple), var(--magenta));
}

body {
  display: flex;
  justify-content: space-evenly;
  background: var(--gradient);
  color: #121212;
  width: 90vw;
  height: 100vh;
  margin: 2rem auto;
}

section {
  display: block;
  background-color: var(--white);
  border-radius: 5px;
  height: 60vh;
  overflow-y: auto;
  margin: 0 1rem;
  padding: 2rem;
  border: 3px solid #121212;
}

p {
  line-height: 1.35;
  font-family: sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

I decided to use custom properties for the colors in this project and declared them first at the top of the file (this is optional of course). Next, we'll use Flexbox to style the <body> using display: flex and space the sections evenly using justify-content: space-evenly. I also added margin to the <body> so that the sections would be centered horizontally with a bit of space on top and bottom as well: margin: 2rem auto

body {
  display: flex;
  justify-content: space-evenly;
  background: var(--gradient);
  color: #121212;
  width: 90vw;
  height: 100vh;
  margin: 2rem auto;
}
Enter fullscreen mode Exit fullscreen mode

The sections each have a height of 60vh with a border-radius of 5px for rounded corners. I added some padding to the <section> as well so that there is a nice amount of whitespace. You want to make sure you declare overflow-y: auto when styling your sections so that they are scrollable:

section {
  display: block;
  background-color: var(--white);
  border: 3px solid #121212;
  height: 60vh;
  border-radius: 5px;
  overflow-y: auto;
  margin: 0 1rem;
  padding: 2rem;
}
Enter fullscreen mode Exit fullscreen mode

The only styling I chose for the paragraph elements was a line-height of 1.35 and changing the font-family to sans-serif:

p {
  line-height: 1.35;
  font-family: sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Styling the scrollbar component

Now it's time for the fun part! In order to select the scrollbar, we'll use the pseudo-element ::webkit-scrollbar on our <section> element to indicate that we want to use a custom scrollbar and assign it a width of 1.25em:

Note: if you plan to use a horizontal scroll bar instead (or in addition to) you'll need to declare a height for the scrollbar

section::-webkit-scrollbar {
width: 1.25em;
}
Enter fullscreen mode Exit fullscreen mode

Next, we can style the 'track' of the scrollbar using ::-webkit-scrollbar-track:

section::-webkit-scrollbar-track {
  border-radius: 1.5px;
  background-color: var(--teal);
  -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}
Enter fullscreen mode Exit fullscreen mode

I added a small border-radius because the <section> container has rounded corners as well. You may also create an inner-shadow for the track using box-shadow and the keyword 'inset'.

Now that the sidebar and sidebar-track have been made we can add custom styling to the sidebar-thumb (this is the element that moves along the track):

section::-webkit-scrollbar-thumb  {
  height: 50px;
  border-radius: 10px;
  background-color: var(--magenta);
  -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}
Enter fullscreen mode Exit fullscreen mode

Once again, we've added border-radius for rounded corners and an inner-shadow on the element. Adding an explicit height here was also necessary because the height of the scrollbar-thumb adapts to screen size and becomes too small of a target on mobile devices.

Hiding the scrollbar

Remember, we want to hide the scrollbar on the first <section> while still maintaining scroll. To do this, simply target the element by its ID (#hidden) and write display: none;

#hidden::-webkit-scrollbar {  
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

Hiding the scrollbar until focused

Styling the third <section> was a bit trickier. We don't want the scrollbar to show unless the section has been focused upon. First, you must target the element by its ID (#inactive) and hide the overflowing content (this also hides the scrollbar!):

#inactive {
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

Next, target the element's :focus state and change the overflow of the y axis to auto:

#inactive:focus {
  overflow-y: auto;
}
Enter fullscreen mode Exit fullscreen mode

If you click or tap on the third section, you should now see our custom scrollbar appear!

Making the sections tabbable and adding :focus styling

These next few steps are implemented so that the sections can be focused upon by keyboard users as well. The <section> element is not tabbable by default as is the case with input elements, buttons, and anchor tags. In order to fix this, I added a tabindex to each of the sections within the HTML:

<section id="hidden" tabindex="1"></section>
<section tabindex="2"></section>
<section id="inactive" tabindex="3"></section>
Enter fullscreen mode Exit fullscreen mode

Next, custom styling can be used to indicate more clearly whether an element has been focused upon. For this project, I applied transition and :focus styles globally:

* {
    transition: all .3s ease;
}

*:focus {
  outline: 4px dotted var(--teal);
}
Enter fullscreen mode Exit fullscreen mode

Finishing touches

You may also wish to add a short note as I have to the third <section> indicating that the user must tap to view the content:

<em>* tap to focus on small screens</em>
Enter fullscreen mode Exit fullscreen mode

In our CSS file, we can hide this element on large screens using a media query:

em {
  display: block;
}

@media screen and (min-width: 769px) {
  em {
    display:none;
  }
}
Enter fullscreen mode Exit fullscreen mode

Next, we should add another media query so that our content collapses when viewed on small screens:

@media screen and (max-width: 768px) {
  body {
    display: flex;
    flex-direction: column;
  }

  section {
    margin: 1rem auto;
  }
}
Enter fullscreen mode Exit fullscreen mode

First, we update our <body> element to use flex-direction: column. Next, adjust the margin on the <section> elements so that there is a vertical gap between them and they are centered horizontally: margin: 1rem auto;

Final HTML: 

<section id="hidden" tabindex="1">
  <h1>Hidden</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>

<section tabindex="2">
  <h1>Styled</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>

<section id="inactive" tabindex="3">
  <em>* tap to focus on small screens</em>
  <h1>Hidden-until-focused</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
    <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
    <br/>
    <br/>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis, quod fugiat natus exercitationem totam eveniet sint. Officiis itaque minima unde facilis at aut nostrum, veniam amet natus perspiciatis laboriosam exercitationem adipisci laudantium nihil voluptatem assumenda animi, fugit est harum officia! Quas quae expedita nemo, qui fuga unde error commodi harum deserunt aut incidunt esse sed laudantium veritatis earum nobis, quisquam at optio perferendis. Sed, consectetur. Enim deserunt tempore sunt? Laudantium rerum dignissimos sunt animi molestias maiores reprehenderit esse quas laboriosam?
      <br/>
    <br/>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita incidunt minima fugiat obcaecati et repudiandae dolore delectus, perspiciatis odio harum! Eaque iste numquam facere voluptas aspernatur molestiae hic vitae ducimus! Ducimus rem assumenda autem! Impedit molestiae quibusdam possimus libero quasi sunt eius rerum, omnis labore unde illo repellendus soluta eveniet vitae voluptatum. Quidem, sit adipisci ratione natus inventore voluptate saepe soluta in! Ea nemo voluptatem perferendis fuga eligendi quas, modi eos architecto, cupiditate minima vel adipisci obcaecati quia debitis! Debitis!
  </p>
</section>
Enter fullscreen mode Exit fullscreen mode

Final CSS: 

:root {
  --white: #f8f5f2;
  --teal: #00E8F0;
  --magenta: #CC0088;
  --purple: #54086B;
  --gradient: linear-gradient(to top left, var(--purple), var(--magenta));
}

* {
    transition: all .3s ease;
}

*:focus {
  outline: 4px dotted var(--teal);
}

body {
  display: flex;
  justify-content: space-evenly;
  background: var(--gradient);
  color: #121212;
  width: 90vw;
  height: 100vh;
  margin: 2rem auto;
}

section {
  display: block;
  background-color: var(--white);
  border-radius: 5px;
  height: 60vh;
  overflow-y: auto;
  margin: 0 1rem;
  padding: 2rem;
  border: 3px solid #121212;
}

p {
  line-height: 1.35;
  font-family: sans-serif;
} 

section::-webkit-scrollbar {
    width: 1.25em;
} 

section::-webkit-scrollbar-track {
  border-radius: 1.5px;
  background-color: var(--teal);
  -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

section::-webkit-scrollbar-thumb  {
  height: 50px;
  border-radius: 10px;
  background-color: var(--magenta);
  -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}


/* hiding the scrollbar for the first <section> */
#hidden::-webkit-scrollbar {
  display: none;
}

#inactive {
  overflow: hidden;
}

#inactive:focus {
  overflow-y: auto;
}

/* use hidden-scrollbar type for 'body' */
body::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 768px) {
  body {
    display: flex;
    flex-direction: column;
  }

  section {
    margin: 1rem auto;
  }
}

em {
  display: block;
}

@media screen and (min-width: 769px) {
  em {
    display:none;
  }
}
Enter fullscreen mode Exit fullscreen mode

That's it! We now have three scrollable sections each with custom styling 🎉

Wrapping things up

This is just the beginning of what you can do to style the scrollbars for your projects. There are a variety of pseudo-elements that can be used to customize each part of the scrollbar:

*::-webkit-scrollbar — the entire scrollbar.
*::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards).
*::-webkit-scrollbar-thumb — the draggable scrolling handle.
*::-webkit-scrollbar-track — the track (progress bar) of the scrollbar.
*::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
*::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
*::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.

One important factor to keep in mind is accessibility. According to MDN, it is not suggested to be used in production due to its incompatibility with some browsers:

MDN Docs - webkit-scrollbar

Alt Text

Alt Text

There is also another method being developed which I think is important to point out: MDN Docs - CSS Scrollbars

Here is an example from MDN:

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
Enter fullscreen mode Exit fullscreen mode

In this example, we're using green for the color of our thumb and purple for our scrollbar's track (both declared using scrollbar-color).

And the HTML:

<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
Enter fullscreen mode Exit fullscreen mode

Current browser compatibility for scrollbar-color and scrollbar-width:

Alt Text

Alt Text

If you know of any other methods that can be used for customizing the scrollbar, please share in the comments. Thank you for reading!

Top comments (1)

Collapse
 
thekashey profile image
Anton Korzunov •

😭 this is why I personally prefer JS-driven custom scrollbars - they are working crossbrowser and are letting you implement what you really want to see.
And custom scrollbars, or at least "scroll indicators" are required in the every second site who strive for a better user experience.

Well, once upon a time I did github.com/theKashey/react-nyan-st..., demo: codesandbox.io/s/j2l71rrxw

Read next

bytehide profile image

How to Create Native .NET Applications for ARM Processors: A Practical Guide for Developers

ByteHide -

fabbuilder profile image

React + Vite: The ultimate guide to static application deployment

FAB Builder | Code Generation -

emiloju profile image

Building SaaS Faster with Ercas for SaaS: A Template for Indie Hackers

Edun Rilwan -

seuros profile image

NoFlyList : How NoFlyList Got Cleared for Production

Abdelkader Boudih -