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
Top comments (0)