Want to keep your UI clean by hiding scrollbars while still allowing users to scroll? In this post, we’ll explore different CSS techniques—includin...

The RubyLA blog offers insights, tutorials, and community updates for Ruby developers in Los Angeles and beyond. Developers can explore Ruby language features, web development frameworks, and best practices for building Ruby applications. Additionally, the blog covers Ruby meetups, events, and job opportunities in the Los Angeles area, fostering collaboration and networking within the local Ruby community.

RUBYLAND

Learn how to hide scrollbars while keeping scrolling intact using various CSS techniques, including TailwindCSS. This can enhance the user experience in sleek and minimalistic web designs by decluttering the UI. Ensure accessibility by maintaining functional scrolling through trackpads, touch gestures, or keyboard navigation.

Hide Scrollbars While Keeping Scrolling Intact

Wrapping It Up: Scrollbars Be Gone! 🎩✨

The problem is… the demo in the article doesn’t work if you hide the scroll bar 😅 You can’t scroll when it’s hidden!

Please, DON’T hide the scrollbars!!

Honestly, i hate it when they hide the scrollbar. It’s such a bad user experience.
Usually you can’t use the arrows of the keyboard to show it, because your focus is in the wrong place. Then you have to scroll the wheel to visualise it, but by the time your mouse reached it, it has disappeared again. And - of course - they make it tiny and hard to see; so that you spent seconds squinting while trying to aim for those 5 slightly darker pixels on the side of the windows.
Hiding the scrollbar just takes away functionality in the name of “but but but pretty!”. On long screens I don’t want to be tapping page up/down over and over; or scrolling my mouse wheel until my finger hurts. I want to click on the scrollbar on the exact location where I want to be. That’s it purpose. It’s super useful!

This is a great article. An alternate approach would be to do this:
<pre><code class="language-css">
.class-no-scrollbar::-webkit-scrollbar {
 height: 0;
}

</code></pre>
PS: Please test on a Macbook

I was on that one too, couldn’t find a solution that worked cross device / browser / os. Sadly your demo doesn’t work for me (macbook, tried it with a mouse and the touchpad). As soon, as you “hide” the scrollbars, you can’t scroll - and that is even worse than an “ugly” scrollbar.