Hide html horizontal but not vertical scrollbar

Cracking the CSS overflow properties

The overflow property in CSS dictates what happens when the content overflows the box. The sub-properties overflow-x and overflow-y target the horizontal and vertical axes respectively.

Understanding the Americans — overflow-x & overflow-y

CSS overflow-x and overflow-y are the Batman and Robin in the world of overflowing content — they help you control the scrolling behavior along x and y axis.

To simplify:

CSS Property	Controls	When to Use
overflow-x	Horizontal scroll	When you want to hide horizontal scroll
overflow-y	Vertical scroll	When vertical scrolling is needed

Setting Stage — Practical implementation

To see this duo in action, try encapsulating a lot of text in a textarea with specific dimensions.

textarea {
    overflow-x: hidden; /* Bye Bye horizontal scroll */
    overflow-y: scroll; /* Hello vertical scroll */
    width: 100%;
    height: 200px;
    background-color: yellow; /* visibility level: Sun */
}


This causes the content to force a vertical scroll while the horizontal scrollbar is nowhere to be found, like a ghost.

Visualization

Converting those intimidating lines of CSS into a fun visualization:

💡 Key Idea: We don't want any East-West scrolling (horizontal) but North-South (vertical) is the way to go.

This is how you're controlling the scrollbars:

Vertical Scroll: ✔️ 
Horizontal Scroll: ❌


In terms of CSS code, this is what it looks like:

/* The Boss's Order: */
body {
  overflow-y: auto;   /* Vertical Scroll: free to roam! */
  overflow-x: hidden; /* Horizontal Scroll: Gates closed! */
}


And that's it! You have:

Vertical Scrolling: 👍 
Horizontal Scrolling: 👎

Without a doubt, we're sailing vertically! 🎏

Overflow control across the bathtub (browser support)

Cross-browser adaptability

The overflow-x and overflow-y properties improvements are widely supported across browsers, ensuring a consistent user experience. So, the party is on, no guests left out!

Managing fixed-height containers in Bathtub

The same solution fits fixed-height containers like gloves fit hands — perfect! It's like that extra layer of bubble bath for the perfect soak.

.fixed-height-container {
    height: 300px; /* keeping it constant */
    overflow-x: hidden;
    overflow-y: auto;  /* Scrollbar lends a hand only when needed */
}


wrap in <textarea>

When dealing with a <textarea>, a vintage alternative is the wrap="virtual" attribute. But, it's like that old toy lying in your attic — not all kids (browsers) play with it.

Further musings on the Scroll Saga

User Experience — The Pirate's Treasures

Hiding the scrollbars can make your site look clean, but remember, accessibility is like a pirate's treasure — invaluable. Only conceal the scrollbars when there's a solid UX reason.

The Scroll Bar Makeover

For some UI charms, you could add some makeup to the scrollbars using WebKit-specific pseudo-elements. A little mascara here, some lipstick there, and voila! A diva scroll bar is born.

Clash of the Containers

Sometimes, when you have complex layouts or compound elements, you may need to put on your detective hat. Check how your elements are getting along with each other. Who knows, the text-overflow might be the culprit causing the scrolling crimes!