---
title: "How to hide html horizontal but not vertical scrollbar?"  
description: "How to hide html horizontal but not vertical scrollbar?"  
author: "Steilla Mitchel"  
published: 2023-07-21  
updated: 2023-07-21  
canonical: https://www.mindstick.com/forum/159202/how-to-hide-html-horizontal-but-not-vertical-scrollbar  
category: "html"  
tags: ["html"]  
reading_time: 1 minute  

---

# How to hide html horizontal but not vertical scrollbar?

How to hide [html](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) horizontal but not [vertical](https://www.mindstick.com/forum/12951/how-to-fix-bootstrap-tab-vertical-with-text) scrollbar?

## Replies

### Reply by Aryan Kumar

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

HTML

```plaintext
<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:

```plaintext
This is a heading

This is a paragraph

This is another paragraph
```

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


---

Original Source: https://www.mindstick.com/forum/159202/how-to-hide-html-horizontal-but-not-vertical-scrollbar

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.