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 */
}

🔍 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;

🔗 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