Leave a trail behind scrollbar

HTML & CSS
1

I want my custom scrollbar to have a trail of green 1’s and zeros something like when you scroll down the small bar that moves down as you scroll down has a trial of light green 1010011010100000110’s that are on top of each other and fade away after 3 seconds.

html {
     scroll-behavior: smooth;
     scroll-padding: 73px;
}

::-webkit-scrollbar {
   background-color: black;
}
::-webkit-scrollbar-thumb {
  background: white;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

::-webkit-scrollbar-button {
     background-color: red;
     border-radius: 5px;
}
2

Styling scrollbars is fraught with accessibility issues and I would discourage you from using them other than for playing around or for silly demos. If you do use them then you have to be very careful that you don’t break their functions. Maybe changing colours only is ok as long as contrast is good but I would be wary of changing the size or the way they behave.

What you are asking is not achievable with css alone anyway and would need some sophisticated js to implement what you are asking.

I had a quick go at attempting something in Chrome only but ran into many issues and would need someone more proficient in JS than me to get right.

If you want to play around then you can find it here.


(Chrome only)

However I would discourage you from actually using it until all accessibility concerns have been considered.:slight_smile:

2 Likes
3

but what about scrolling Up?

4

You only asked about scrolling down :slight_smile:

It’s basically the same though and you’d toggle a different class based on the direction.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.