Made a scroll bar buddy that walks down the page when you scroll
159 comments
·March 3, 2025donatj
BoxOfRain
Until recently a must-have in my .bashrc was `fortune | cowsay` but this tripped me up when one of the spicier fortunes was output during a video call with my then-boss, no harm done but I decided to retire it to only personal machines.
I imagine there's many versions of that story contributing to why these things are less popular than they were.
guappa
So repressed :D Is your boss a minor? I doubt it.
psygn89
Nice! I had an idea that I never coded up. Basically a hamster with a parachute that would fall slowly to the bottom of the page. If you scroll down fast his parachute will deploy to catch up and land once again at the bottom of the viewport. He'll hold a "Top" sign when you hover over him and will shoot off with a jetpack when you click on him and as the screen hits the top you'll see him deploy a parachute again to gently land at the bottom of the screen.
raaron773
Okay now i want this. For some reason i keep imagining the hamster to look similar to the gopher in golang (obviously not blue)
andirk
Waiting for the repo link. I will add a fork where the hamster's parachute doesn't redeploy if scrolling to fast and then the user "loses". Discourages scrolling. Might be helpful?
szszrk
Have a look at my other comment. I just noticed it has an issue that parachute doesn't redeploy properly when you scroll down->up->down, but it works nicely aside of that.
MHM5000
and on scroll up a hamster with jetpack/rocket
szszrk
https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
Disclaimer: I wrote zero lines of this, it was made purely with Claude 3.7 (via Kagi assistant) with around 10 additional revisions in one conversation. I pasted the emojis in the prompt, but that's basically it.
I never coded anything meaningful in html and js.
Edit: it silly that in a place where so much discussion is about AI, when I paste a working AI generated code what I first get is downvotes. I guess you like hating AI more than hamsters.
matsemann
> a working AI generated
The parachute will never deploy if you're higher than a previous low. So if you scroll down, a bit up, and then down again it will not have a parachute, until reaching the point where it was at the bottom last and then suddenly it gets a parachute mid fall.
If it's falling without a parachute, it will get glued to the corner the moment you start scrolling up. If it's falling with a parachute, scrolling up will break it and it will continue past the screen.
I don't want to sound overly critical - it's cool that you dished this up so quick - just commenting on your comment. The fact that the AI made so many bugs in such a short script is kinda disproving it "working", doesn't mean we like hating AI.
turblety
Sorry you got downvoted. Uploaded it for a demo: https://65d22473-339d-4325-90bb-bef215770f60.paged.net/
dominicrose
I wouldn't downvote this because it's interesting to see what an AI can do. But it's pretty clear a human has to fix it.
hello12343214
ok this sounds cool
rizky05
[dead]
jsheard
This kind of thing should probably be disabled if the user has prefers-reduced-motion set.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
It just needs one extra CSS rule to make the guy invisible when appropriate:
@media (prefers-reduced-motion) {
#scrollBuddy {
visibility: hidden;
}
}geor9e
It seems the author has now implemented this. Now people like me just see a pointless page of lorem ipsum. I feel like demos can be exempted from filters like this, especially when you can only get to the demo via a clearly worded link.
The same code that disappeared the thing could add some text explaining that the page is disabled and why, in my case: Apple Menu > System Preferences > Accessibility > Display > Reduce motion (for other OS's see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...)
For me, this setting makes macOS snappier, by getting rid of the little animations in OS. If it weren't for this comment, I never would have known it affected websites. I've had the setting for years with no issues.
rendx
If you're like me and want to keep the OS setting intact but not have it affect web sites, add the following preference in Firefox: ui.prefersReducedMotion (0 = no, 1 = yes).
hello12343214
good to know thanks
DrammBA
Every change really does break someone's workflow https://xkcd.com/1172/
Counter-argument against exempting the demo page: https://news.ycombinator.com/item?id=43237672
geor9e
At a certain point, one must take responsibility for clicking "a scroll bar buddy that walks down the page when you scroll" and then being faced with exactly what it said.
crabmusket
> Counter-argument against exempting the demo page
I really don't think that's a counter-argument for exempting the demo. It's an argument against ever implementing this feature on an actual website. Or, an argument for using the prefers-reduced-motion check on an actual website.
hello12343214
I like that cartoon. much care and thought should be taken when implementing changes that affect users :)
sitkack
Thank you! I just went and adjusted a bunch of these, "reduced transparency" really reduced the visual load, I didn't realize how many windows were bleeding through for no reason.
null
LoganDark
> For me, this setting makes macOS snappier
For me, it just replaces the slow movement animations with slow fade animations instead, which is just utterly infuriating.
DrammBA
I just replied to call out how negative your initial comment was and was suprised to see the full edit, thank you for the change and even providing sample code.
oneeyedpigeon
I guess this is probably the kind of exact reason that I have "reduce motion" set, but it's a shame in this case since it's a pretty harmless implementation!
hello12343214
good catch. it should be fixed now for users that have those settings turned on. much appreciated!
robocat
Now some of us would like an override checkbox to enable your demo again!
I didn't even know I had prefers-reduced-motion turned on and I certainly didn't know it affected web pages via CSS!!!
Another 0/1 bit for fingerprinting. Doesn't appear in https://coveryourtracks.eff.org/ (panopticlick). Also see prefers-contrast, prefers-reduced-transparency, prefers-color-scheme, inverted-colors
null
Summerbud
Oh that is a really good point!
codelion
that's a good point about prefers-reduced-motion... i hadn't considered that. it's an easy win for accessibility.
_blk
I don't mean to be rude but that's more of a preference not something you dictate to the server. If I had to care for all those settings I wouldn't get any projects done. The one I do respect is do not track and dark mode when it's part of the project anyway but the rest is on customer request
DrammBA
Not sure what you mean by "not something you dictate to the server", browser preferences are client-side. When you say "all of those settings" there's really two major prefers- settings and you already covered one (prefers-color-scheme), writting an extra query to cover prefers-reduced-motion requires minimal effort and provides a lot of value to your site's accessibility.
block_dagger
This is CSS, it's not dictating anything to the server, rather to the browser.
kwar13
Why is this behind a google form...? There isn't even a screenshot of what it looks like before collecting an email address. What a strange post to hit front page.
roetlich
Just stay on the page, don't click the "Get a scroll buddy for your website" link.
Jleagle
I see a preview on the linked page, but still odd instructions can only be emailed to you.
tinthedev
It's not? I opened the page and it worked just fine.
Oh, you've either got the CSS disabled, or you missed the implementation next to your scrollbar. Check the other comments.
hello12343214
Instead of a boring scrollbar thought it would be fun to have an animated stick figure that walks up and down the side of your page when you scroll.
This is the first prototype i made.
Going to make a skateboarder, rock climber, or squirrel next. what other kinds of scroll buddies should I make?
JKCalhoun
Two guys pumping a rail-car.
Someone rowing the scrollbar thumb (the longer the thumb, the more rowers).
hello12343214
row boat would be cool
thomasfromcdnjs
Saw this catapillar one a few weeks ago -> https://x.com/trunarla/status/1893705260142657764
block_dagger
Very cool idea! Suggestion: add a trail of breadcrumbs that the figure tosses behind them and, when scrolling up, picks them back up again or kicks them off the screen.
hello12343214
this is a great idea! I am working on a few other scroll buddy animations :)
chuckwolfe
My first two ideas to ‘innovate’ on this was; a car driving down the page, or a drag racing Christmas tree where the lights count down in ‘full tree’ style.
rexer
Maybe a raindrop? Anyone else cheer for raindrop races as a kid on long drives?
An apple falling on to Newton's head.
Fun to think about!
jorisboris
Change the persons orientation (make him turn around) when going back up?
davidw
Some gears meshing together and rotating that 'make' the page go up and down?
fooker
Monkey climbing a pole (children's arithmetic problem)
Cat, with different animations depending on how fast you scroll.
Elevator, with stops at paragraphs(/some other break)
brysonreece
Surprised I seem to be the only one willing to ask; _why in the world would you wall the implementation behind a Google Form?_
Edit: Implementation details are actually readily accessible in the DOM. Here's a gist that extracts the relevant details (for those who, understandably, don't want to give out their email in exchange):
https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...
_def
It's baffling to me. It's one thing if you don't want to do a write up and share it but to offer that in exchange to collect email adresses seems so strange.
kevlened
As it currently stands, code without an explicit license isn't usable. There is no license for the code you posted, but contacting him could get you one. Using the code linked could constitute a copyright violation.
null
rpmisms
He wants payment for his work, just in attention rather than money. Seems reasonable to me.
hmmm-i-wonder
This highlights just how useless and unusable existing scroll bars are.
The ability to easily see where you were on the page was great. And it's got some humour. I love it.
I_am_tiberius
I tried it in 3 browsers but dont see anything in anyone of them.
beardyw
I am not sure about walking on a moving thing. I would like to see a kind of surfboard action, balancing only when it moves.
Over to you!
rcfox
Reminds me of the late 90s when people would add effects to their websites, like snow or trails of sparks that follow the mouse.
altacc
Yep, DHTML Zone was the go to place for trippy visuals that'd paralyze your users' browser so that you could make your website look super awesome cool!
kmoser
What am I missing? I don't see anything except the scroll bar itself, on both Firefox and Chrome. Do my custom scroll bar colors have something to do with it?
EA
Perhaps because of this: https://news.ycombinator.com/item?id=43237747
AHASIC
Same for me, nothing happens.
Mashimo
Do you a have reduce motion set in your OS? That preference is respected and the guy is disabled.
I love this. I miss lighthearted things like this being more of the norm than the exception. Xeyes on 90s Linux, cowsay, whatever that was that made snow gather on top your windows (Xsnow?). Heck, I even have fond memories of Björks website having an animated bee that would follow you around. I think he was named Meesta Bee or something similar.
Everything is so dang serious all the time, I miss the sense of levity and wonder that used to follow tech around.