Mastering the art of hiding scrollbars with CSS

Introduction

Scrollbars are an essential part of web browsing, providing users with a visual cues to navigate through content that exceeds the viewport.

However, there are cases where you may want to hide the scrollbars to create a cleaner, more minimalistic design or customize the user experience.

In native mobile apps, scrollbars are typically not visible, and removing them from your website can give it a more native app-like feel. In this article, we will explore various techniques to hide scrollbars using CSS.

In this article, we will explore the algorithm behind the technique to hide scrollbars using CSS. Understanding the underlying principles will empower you to apply the technique in various contexts. Additionally, we will provide a practical example implemented with Tailwind CSS, a popular utility-first CSS framework that enables rapid development by providing pre-defined classes for styling elements.

By delving into the algorithm and showcasing an example with Tailwind CSS, you'll gain a comprehensive understanding of how to achieve a native app-like feel by hiding scrollbars. So, let's dive in and explore the algorithm behind this trick, followed by an implementation example using Tailwind CSS.

The Algorithm

• Create the component with a specific height, let's say x pixels, and set the overflow-x property to auto. This ensures that a horizontal scrollbar appears if the content overflows horizontally.
• Wrap the component with a div and set the height of the wrapper div to x pixels.
• Set the overflow property of the wrapper div to hidden. This hides any content that exceeds the height of the wrapper div.
• Increase the height of the component by y pixels.
• Apply a matching padding-bottom of y pixels to the component. This ensures that there is enough space at the bottom of the component to accommodate the increased height without triggering the scrollbar.

By following these steps, the scrollbar will disappear because the content no longer overflows the wrapper div. The padding at the bottom of the component compensates for the increased height, resulting in a hidden scrollbar effect.

This technique is useful for creating visually appealing designs without the visible clutter of scrollbars. It provides a smooth and seamless user experience while allowing content to be scrolled horizontally if necessary.

Building a scrollable list

I have set up a new React application using Vite as the build tool. As part of the application, I have created a simple <List /> component. While the purpose of this blog is not to delve into building a scrollable list, I would like to provide the code for your reference. Please find the code snippet below.

List component

function List({ hiddenScrollBar }: { hiddenScrollBar?: boolean }) {
  return (
    <ul
      className={classNames(
        "flex gap-4 px-4 py-8 overflow-x-auto sm:gap-8 sm:px-8 md:px-12 md:gap-12",
        hiddenScrollBar && "h-56",
        !hiddenScrollBar && "h-52"
      )}
    >
      {images.map((image) => {
        return <ImageCard {...image} />;
      })}
    </ul>
  );
}

ImageCard component

function ImageCard({ src, alt }: Image) {
  return (
    <li className="overflow-hidden bg-gradient-to-br from-gray-50/30 to-gray-300 via-gray-100/50 shrink-0 rounded-xl">
      <img
        src={src}
        alt={alt}
        className="object-cover aspect-[7/5] h-full w-full"
      />
    </li>
  );
}

export default ImageCard;

Types for Image

export type Image = {
  src: string;
  alt: string;
};

NOTE
classnames is an npm package which helps us with conditionally setting classnames for an element. One can simply do this 👇 for adding classnames conditionally

    className = {`flex gap-4 px-4 py-8 overflow-x-auto sm:gap-8 sm:px-8 md:px-12 md:gap-12 ${hiddenScrollBar ? "h-56" : "h-52" }`}

Conclusion

Hiding scrollbars with CSS offers a range of possibilities to enhance the user experience or achieve a particular design aesthetic.

Experiment with these techniques to create seamless and engaging scrolling experiences on your web projects, giving them a native app-like feel.

Did you find this article on hiding scrollbars with CSS helpful? If so, show your support by giving it a thumbs-up! Don't forget to like and share to help others discover these handy techniques for achieving a clean and native app-like feel on their websites. Engage with us and let us know your thoughts!

You may find the full source code on github. And here is a working demo of the same.

Happy Hacking