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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

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

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay