Made a scroll bar buddy that walks down the page when you scroll

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.

This kind of thing should probably be disabled if the user has prefers-reduced-motion set.<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;@media&#x2F;prefers-reduced-motion" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;@media&#x2F;pref...</a><p>It just needs one extra CSS rule to make the guy invisible when appropriate:<p><pre><code> @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }</code></pre>

How has nobody said that this should be called &#x27;Stroll Bar&#x27;????

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.<p>This is the first prototype i made.<p>Going to make a skateboarder, rock climber, or squirrel next. what other kinds of scroll buddies should I make?

Surprised I seem to be the only one willing to ask; _why in the world would you wall the implementation behind a Google Form?_<p>Edit: Implementation details are actually readily accessible in the DOM. Here&#x27;s a gist that extracts the relevant details (for those who, understandably, don&#x27;t want to give out their email in exchange):<p><a href="https:&#x2F;&#x2F;gist.github.com&#x2F;brysonreece&#x2F;b15f33cda30af06b7b70788d10b631ce" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;brysonreece&#x2F;b15f33cda30af06b7b70788d...</a>

What am I missing? I don&#x27;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?

Reminds me of the late 90s when people would add effects to their websites, like snow or trails of sparks that follow the mouse.

This sort of project reminds me of the old internet. I love it.

Why is this behind a google form...? There isn&#x27;t even a screenshot of what it looks like before collecting an email address. What a strange post to hit front page.

This is funny and clever.<p>If I were a developer, I would make a version where, when the stick figure moves backward as you scroll up, it does the moonwalk.

This highlights just how useless and unusable existing scroll bars are.<p>The ability to easily see where you were on the page was great. And it&#x27;s got some humour. I love it.

It doesn&#x27;t render for me on any of these:<p>- Chrome on Windows 11<p>- Firefox on Windows 11<p>- Chrome on Android<p>- Firefox on Android<p>Also no JS errors on console.<p>Maybe I&#x27;m doing something wrong?<p>I tried in both Ultrawide and traditional FullHD screens.

Anybody remember Comet Cursor?[1]<p>[1] <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Comet_Cursor" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Comet_Cursor</a>

I made a simple javascript by copying your code so that I can add this cute guy on my website, please let me know if this is not OK (<a href="https:&#x2F;&#x2F;github.com&#x2F;jwenjian&#x2F;scroll-buddy">https:&#x2F;&#x2F;github.com&#x2F;jwenjian&#x2F;scroll-buddy</a>)

Sisyphus when using infinite scroll?

Finally a useful piece of software that doesn&#x27;t require a monthly subscription. Count me in.

Ooh, how novel, and we&#x27;ll-executed. I imagine this might be useful in conjunction with a minimap as &quot;terrain&quot;.<p>Useful, that is, in terms of getting a proprioceptive &quot;feel&quot; for the anatomy&#x2F;topography of a document.

This is nice. It reminds me of old Windows desktop pets: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=CosQ1n7k6lw" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=CosQ1n7k6lw</a>

Next version: stick man is context aware and does different actions based on the content, for example it jumps whenever the user scrolls to an h2.

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.<p>Over to you!

It looks wrong when scrolling up. The direction of the feet makes it look like walking backwards in a very strange way.

Haha, this is great fun. Scratching my own itch and making him turnaround when you scroll up:<p><pre><code> &#x2F;* Add style *&#x2F; #scrollBuddy.walkUp { transform: rotate(-90deg) scaleX(-1); } &#x2F;* Amend script *&#x2F; var lastTop = 0; function updateBuddyVerticalPosition(scrollPosition) { &#x2F;&#x2F; All as before but add the below before requestAnimationFrame if (lastTop &lt;= newTop &amp;&amp; buddy.classList.contains(&#x27;walkUp&#x27;)) { buddy.classList.remove(&#x27;walkUp&#x27;) } else if (lastTop &gt; newTop) { buddy.classList.add(&#x27;walkUp&#x27;) } lastTop = newTop; }</code></pre>

The act of scrolling is only noticeable by the browser + Javascript per whatever cycle it&#x27;s on; it&#x27;s not always watched except for at certain checkpoints.<p>To more accurately be affected by quick scrolls, save the last known y-axis value and compare to the current y-axis value. Act accordingly!

Nice, I&#x27;m not sure if someone already suggested, reverse the toe direction when scrolling up.

I suspect either OP wasn&#x27;t using the internet in 2001,or they were using the internet in 2001.

cool screenmate could definitely be added as a userscript like <a href="https:&#x2F;&#x2F;greasyfork.org&#x2F;en&#x2F;scripts&#x2F;465955-oneko-webmate" rel="nofollow">https:&#x2F;&#x2F;greasyfork.org&#x2F;en&#x2F;scripts&#x2F;465955-oneko-webmate</a>

This is awesome, thanks for sharing it. I love how creative&#x2F;random it is, a real gem imo!

Really cool thank for sharing! I tweaked the code a bit so that I could get Mario sliding down the flag pole for my gaming website. <a href="https:&#x2F;&#x2F;www.gamedrop.gg&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.gamedrop.gg&#x2F;</a>

Please change the direction of walking when scrolling up. Right now the stick figure is walking backwards. It could be reversed or perhaps made to seem like backtracking (add a little more “caution”, “fear”, etc.).

I tried it in 3 browsers but dont see anything in anyone of them.

love this. would also love to see the direction of scroll and scroll speed reflected in character&#x27;s behavior, ie walking up or down and walking vs running respectively.<p>I often wonder why corporate engagements (advertisements) aren&#x27;t wrapped in something like this. people are always looking for distractions even while they&#x27;re in the middle of a distraction so a fun interaction that starts out by getting your attention like this would seem to make sense. anyway, this is cool

I like it, I just wish I could grab it to scroll too. Scroll bars are hard to grab these days as GUIs try to save space by making them one or two pixels thick.

Dear god, please never screw up the x-overflow...<p>(or... do it, and see if these artificial beings are already more powerful than us and can&#x27;t be stopped...)

Can you make him moonwalk when you scroll up?

I don&#x27;t see anything in Firefox on Windows. I tried adding `ui.prefersReducedMotion` setting as FALSE, nothing.

Super cool. The next way is to implement a Breakout game sideways which you can control by scrolling up and down :-)

I remember when scrollbars were just visible all the time, everywhere you went, no special support needed

hmm... doesn&#x27;t seem to be working in Chrome 122.0.6261.128 (Official) or Firefox 135.0.1

Speaking of how the guy starts out on one side of the scrollbar and “walks” to the other, a decade ago I programmed a “scroller” js tool (behavior) that I could add to any element. It basically made it so that when I pressed a trigger with my finger, a menu would appear under it, and then I could move the finger without lifting it until I reached the item I want and release. The memu would scroll under my finger, so that if I reached the bottom (minus a margin) it would already be scrolled all the way to the bottom. Same kind of math as the guy here.<p>I was tired of having to tap, then scroll, then tap again, on phones. Yes, I really made sure that mode worked too, but the “hidden mode” was to get the selection done in one swipe! Just like I could always do on a Mac, in one mouse swipe!<p>For mouse interaction - you didn’t even need to press, move and release. You’d hover over the trigger element and then move your mouse down, then click. In that case the menu would disppear if you moved the pointer out of it.<p>You don’t have to imagine, just try the Developer menu on <a href="https:&#x2F;&#x2F;Qbix.com" rel="nofollow">https:&#x2F;&#x2F;Qbix.com</a> for instance (the menu isn’t long enough but try turning your phone horizontally to make vertical space more limited.. or the tech savvy among you can use Safari debugger to copypaste some more menu items into that menu).<p>By the way, I now have dozens or hundreds of such “tools” I use to create interfaces. Menus. Dialogs. Tooltips. Onboarding Hints. Speech. Tabs. Chatrooms. Live videoconferencing. Peer to peer broadcast that’s uncensorable. Ok that escalated fast :) <a href="https:&#x2F;&#x2F;intercoin.app" rel="nofollow">https:&#x2F;&#x2F;intercoin.app</a> as an example.

But you can&#x27;t grab him and move him (to scroll past large chunks).

Didn&#x27;t seem to animate on Firefox android.<p>Also it was invisible with Dark Reader.

Would be cool if you make him run when the scroll becomes faster

really cool. On mobile devices, I would suggest inverting his movement So that he matches the way someone scrolls with their finger.

why should I give you my email to get this?

Can he turn around when you scroll back up?

Macs hate it when you do this...

I hope to see a % scrolled please :)

Fun! He’s a great speed walker too

users of dark reader: the buddy is invisible if you have dark mode turned on

Would be cool if you could play one sided pong with the scrollbar and bounce a ball around the window.

This is oddly delightful :)

Lots of positive comments.<p>Allow me to share a different perspective:<p>I hate this.<p>I long for serious content and straightforward UX, and less on gimmicks. The modern scrollbars is a good example of how terrible UX has become, which is obvious when comparing to the design principles of the 90s.<p>The smartphone dominates UX today. I suspect the reason why scrollbars disappeared was to save pixels on low-resolution smartphone screens. And now we&#x27;re stuck with it.

Now combine it with elevatorjs:<p><a href="https:&#x2F;&#x2F;tholman.com&#x2F;elevator.js&#x2F;" rel="nofollow">https:&#x2F;&#x2F;tholman.com&#x2F;elevator.js&#x2F;</a>

It&#x27;s very cute!

This is awesome.

Need some sort of dancing gif, maybe user upload. Should fully stop &#x2F; reset position when not scrolling. Also someone make AI bonzai buddy.

I like it, quickly tried to scroll back looking for the moonwalk, lol

amazing!

I rarely literally LOL to HN posts but this one did it for me.

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.<p>Everything is so dang serious all the time, I miss the sense of levity and wonder that used to follow tech around.

Sorry, but I find this <i>incredibly</i> distracting and unpleasant to me. Yanks my focus every time I scroll. Any site using it is an instant back button for me.