How to hide html horizontal but not vertical scrollbar?

Question

Aryan Kumar · Answer

Sure, here is how you can hide the horizontal scrollbar in HTML but not the vertical scrollbar:

HTML

<style>
  /* Hide horizontal scrollbar */
  .container {
    overflow-x: hidden;
  }

  /* Keep vertical scrollbar visible */
  .container {
    overflow-y: visible;
  }
</style>

<div class="container">
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
</div>

The overflow-x: hidden CSS property tells the browser to hide the horizontal scrollbar for the element with the class container. The overflow-y: visible CSS property tells the browser to keep the vertical scrollbar visible for the element with the class container.

This will hide the horizontal scrollbar for the container element, but will keep the vertical scrollbar visible.

Here is an example of how this would look in the browser:

This is a heading

This is a paragraph

This is another paragraph

The horizontal scrollbar is hidden, but the vertical scrollbar is still visible.

forum

How to hide html horizontal but not vertical scrollbar?

Can you answer this question?

1 Answers