How do I hide overflow-X but still scroll?

How To Hide Scrollbars

body { overflow: hidden; /* Hide scrollbars */ } Try it Yourself »
body { overflow-y: hidden; /* Hide vertical scrollbar */ overflow-x: hidden; /* Hide horizontal scrollbar */ } Try it Yourself »
/* Hide scrollbar for Chrome, Safari and Opera */ .example::-webkit-scrollbar { display: none; }

What does overflow-X hidden do?

How do I hide scroll overflow?

This hides all content beyond the element’s border. Alternatively, use overflow: visible to show content that extends beyond the borders of the container. This Pen is owned by HubSpot on CodePen.

What is the difference between overflow scroll and overflow hidden?

The overflow is not clipped. The content renders outside the element’s box. hidden – The overflow is clipped, and the rest of the content will be invisible. scroll – The overflow is clipped, and a scrollbar is added to see the rest of the content.

What is Overflowx?

The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges. Tip: Use the overflow-y property to determine clipping at the top and bottom edges.

How do you make a card body scrollable in HTML?

Add data-spy=”scroll” to the element that should be used as the scrollable area (often this is the element). Then add the data-target attribute with a value of the id or the class name of the navigation bar ( . navbar ).

How do I make the scrollbar appear in Chrome?

How to show or hide your scrollbar

Start by opening a new Chrome window or tab.
The page should show multiple drop-down menus saying either ‘Default’ ‘Enabled’ or ‘Disabled’ with a warning at the top of the page saying:
Next you’ll need to find and locate ‘Overlay Scrollbars’.
Using your keyboard, hold “Ctrl+F”.

Navigation