forum

home / developersection / forums / how to hide html horizontal but not vertical scrollbar?

Ask Question

How to hide html horizontal but not vertical scrollbar?

Steilla Mitchel 316 21-Jul-2023

How to hide html horizontal but not vertical scrollbar?

html html 
Updated on 21-Jul-2023
Steilla Mitchel

Student

I completed my post-graduation in 2013 in the engineering field. Engineering is the application of science and math to solve problems. Engineers figure out how things work and find practical uses for scientific discoveries. Scientists and inventors often get the credit for innovations that advance the human condition, but it is engineers who are instrumental in making those innovations available to the world. I love pet animals such as dogs, cats, etc.

Follow
Can you answer this question?
Answer

1 Answers

Aryan Kumar

Aryan Kumar

21-Jul-2023

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.

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy