DEV Community

Creating A Custom Scroll Bar In 24 Lines Of CSS

Emma Bostian ✨ on August 27, 2020

Have you ever encountered a website with a beautiful scrollbar and thought to yourself “wow, I wish I could create something like that.” Me too! An...

Read full post

Andrew Bone • Aug 27 '20 • Edited

This is really cool and shows how simple it can be to do seemingly complicated things, there are a couple of gotcha's I can think of though 😊

breaks on page resize
can't click on the scrollbar to jump to place
small changing height causes a repaint.

Resize

I added a debounce because recalculating on every frame of a resize sounds chunky 😅

let debounceResize;
window.addEventListener("resize", () => {
  clearTimeout(debounceResize);
  debounceResize = setTimeout(() => {
    totalPageHeight = document.body.scrollHeight - window.innerHeight;
  }, 250);
});

Interactivity

I think this is expected behaviour from the user, I don't know if this is the best way to do it though.

const progressBarContainer = document.querySelector("#progressBarContainer");
progressBarContainer.addEventListener("click", (e) => {
  let newPageScroll = e.clientY / progressBarContainer.offsetHeight * totalPageHeight;
  window.scrollTo({
    top: newPageScroll,
    behavior: 'smooth'
  });
});

Transform

I think this one is just my personal taste as opposed to something anyone else would care about 😁

#progressBar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  background: linear-gradient(to top, violet, red);
  will-change: transform, opacity;
  transform-origin: top center;
  transform: scale(1, 0);
  opacity: 0;
}

window.addEventListener("scroll", () => {
  let newProgressHeight = window.pageYOffset / totalPageHeight;
  progressBar.style.transform = `scale(1,${newProgressHeight})`;
  progressBar.style.opacity = `${newProgressHeight}`;
}, {
  capture: true,
  passive: true
});

I hope you don't mind my comment, I just found the project really interesting so had a little look.

Vaibhav Khulbe • Aug 27 '20

Yes, this is one of the things missing here! Thanks for sharing 😁

Alistair Shepherd • Sep 3 '20 • Edited

I'd love to give positive feedback because I do like simple solutions and when we can make things pretty, but honestly all you've done is made a terrible alternative for something you had to go out of your way to remove!

We have all these tools to style the scrollbar now to look great (which you've used to hide them) - let's use those instead of promoting anti-patterns that reduce accessibility, and make it more difficult for users to navigate. Let's not abuse scrollbar styling, forcing browser vendors to reduce the control we have so we don't ruin UX.

If you need a custom scrollbar for legacy browsers then I totally understand you need to replace it, maybe with a bit more thought than this simple implementation though. For modern browsers this isn't necessary, embrace browser scrollbar styling!

Ole-Martin Bratteng • Sep 4 '20

Scrollbars and scrolling are two things I refuse to touch. I utterly hate it when my scrolling is hijacked and it changes how scrolling behaves (like slower or with bounce). And I like the functionality of the scrollbar, use it often on my phone to quickly scroll up and down. I just tap and drag.

Alistair Shepherd • Sep 4 '20

I mean scroll-jacking is absolutely horrible, it drives me a bit nuts how all of these websites that win awwwards and such all ruin the experience by removing native scrolling. People ignore how much of a basic accessibility problem it is too, a slight difference in scroll behaviour can make people feel uncomfortable and even motion sick using your website.

Scrollbars I will touch if what's needed is a custom scrollbar in legacy browsers, but only in the form of a well-regarded library with a lot of history that prioritises accessibility. I still don't like it as it's so unnecessary but at least I know it's not harming people in the process.

Thibaut Allender • Aug 30 '20

Congratulations, you just spent a couple of hours to make your scrollbar not accessible.

Vaibhav Khulbe • Aug 27 '20

It's so great to see the power of HTML, CSS and JS - the barebones of anything we do on the web! Using these basic languages, we can create so much and need no fancy libraries or intense knowledge.

I really liked the scroll bar implementation here but I think a horizontal bar to the top makes more sense because to the right (usually) we have the browser default scroll bar. Rest assured, the tutorial is really useful and easy to digest! 🔥

Tom Livingston • Sep 9 '20

Can we stop referring to this as a scrollbar? It's a progress bar mapped to scrolling. I like it. I've seen horizontal ones but this makes my head hurt a little less as it is in the direction of scroll. It's great, really. But it isn't a scrollbar.