DEV Community

Joodi
Joodi

Posted on

2 1 1 1 1

Hiding the Scrollbar While Keeping Scroll Functionality in Web Projects ✨

Have you ever needed to hide the scrollbar in your web project but still keep the scrolling functionality? 🤔 Sometimes, a cleaner and more minimalist design is necessary to enhance user experience. In this post, I’ll explain how to hide the scrollbar while still allowing users to scroll through the content.

🎨 How to Do It?
We can achieve this using a combination of CSS styles that work across different browsers:

.scrollbar-hide {
  -ms-overflow-style: none; /* Internet Explorer and Edge */
  scrollbar-width: none; /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}
Enter fullscreen mode Exit fullscreen mode

🔍 Explanation of the Styles:
-ms-overflow-style: none: Hides the scrollbar in Internet Explorer and Edge.
scrollbar-width: none: Hides the scrollbar in Firefox.
::-webkit-scrollbar { display: none; }: Hides the scrollbar in WebKit browsers like Chrome, Safari, and Opera.

📝 Example in Practice:
Imagine you have a sidebar in your application that needs to be scrollable but with a hidden scrollbar:

import React from "react";

const Sidebar = ({ activeComponent }) => {
  return (
    <div className="scrollbar-hide">
      <p>This is scrollable content, but the scrollbar is hidden!</p>
    </div>
  );
};

export default Sidebar;
Enter fullscreen mode Exit fullscreen mode

Image description

🔗 Portfolio: https://Joodi.me
🔗 Github: https://github.com/MiladJoodi
🔗 Linkedin: https://www.linkedin.com/in/MiladJoodi
🔗 Medium: https://github.com/MiladJoodi
🔗 Dev.to: https://dev.to/joodi

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay