How to Show a Specific Scroll Bar While Hiding Others Using CSS

Learn how to hide all scroll bars on your website but show a specific horizontal scroll bar within a div using CSS techniques.
---
This video is based on the question https://stackoverflow.com/q/71338428/ asked by the user 'Agustín Tamayo Quiñones' ( https://stackoverflow.com/u/18172381/ ) and on the answer https://stackoverflow.com/a/71338491/ provided by the user 'SA Bappy' ( https://stackoverflow.com/u/11480409/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: scrolls bar hidden but one show

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Show a Specific Scroll Bar While Hiding Others

When designing a website, you may encounter situations where you want to control the visibility of scroll bars. For instance, you might want to hide all scroll bars but allow a specific one inside a div to remain visible. This can enhance the user interface and provide a cleaner look. In this guide, we'll explore how to achieve this using CSS.

The Problem

Imagine that you have a website where scrolling has been completely disabled. You achieved this with the following CSS style:

[[See Video to Reveal this Text or Code Snippet]]

While this approach may serve your purpose of hiding scroll bars, you may now find yourself needing a specific horizontal scroll bar within a div to be visible. This raises the question: How can you show only one scroll bar while hiding all the others?

The Solution

The good news is that you can selectively control the visibility of scroll bars using CSS. Here's a step-by-step guide on how to show a specific horizontal scroll bar while keeping the rest hidden.

Step 1: Disable the Default Scroll Bars

Start by ensuring that your default scroll bars are hidden across your website. You can do this by applying the following CSS rule to your body element:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Define Your Specific Scroll Bar

Now that the default scroll bars are hidden, you can create a custom scroll bar that will only appear when needed. The following CSS code provides an example of how to style your scroll bar:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Apply to Your Div

To implement the horizontal scrolling effect, apply the above CSS rules to the specific div where you want the scroll bar to appear. Make sure the content inside your div overflows horizontally:

[[See Video to Reveal this Text or Code Snippet]]

Recap and Tips

General Visibility: Use display: none to hide all scroll bars by default.

Custom Scroll Bar: Define the scroll bar’s appearance with the ::-webkit-scrollbar pseudoelement and its parts like ::-webkit-scrollbar-thumb for customization.

Horizontal Scrolling: Ensure that the content inside your target div will overflow horizontally so that the scroll bar becomes functional when the content exceeds the div's width.

By following these structured steps, you can enhance the usability of your website by only showing specific scroll bars when necessary. Enjoy customizing your web pages to create a more refined look and feel!

Видео How to Show a Specific Scroll Bar While Hiding Others Using CSS канала vlogize