[html] How do I remove the horizontal scrollbar in a div?

When I set overflow: scroll, I get horizontal and vertical scrollbars.

Is there a way to remove the horizontal scrollbar in a div?

I had been having issues where I was using

overflow: none;

But I knew CSS didn't really like it and it didn’t work 100% for how I wanted it to.

However, this is a perfect solution as none of my content is supposed to be larger than intended and this has fixed the issue I had.

overflow: auto;

Add this code to your CSS. It will disable the horizontal scrollbar.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Don't forget to write overflow-x: hidden;

The code should be:

overflow-y: scroll;
overflow-x: hidden;

To remove the horizontal scroll bar, use the following code. It 100% works.

html, body {
    overflow-x: hidden;
}

CSS

overflow-y: scroll;

See it on jsFiddle.

Notice if you remove the -y from the overflow-y property, the horizontal scroll bar is shown.

No scroll (without specifying x or y):

.your-class {
   overflow: hidden;
}

Remove horizontal scroll:

.your-class {
   overflow-x: hidden;
}

Remove vertical scroll:

.your-class {
   overflow-y: hidden;
}

Use:

overflow: auto;

This will show the vertical scrollbar and only if there is a vertical overflow, otherwise, it will be hidden.

If you have both an x and y overflow, then both x and y scrollbars will be shown.

To hide the x (horizontal) scrollbar, even if present simply add:

overflow-x: hidden;

body {_x000D_
    font-family: sans-serif;_x000D_
}_x000D_
_x000D_
.nowrap {_x000D_
    white-space: nowrap;_x000D_
}_x000D_
_x000D_
.container {_x000D_
    height: 200px;_x000D_
    width: 300px;_x000D_
    padding 10px;_x000D_
    border: 1px solid #444;_x000D_
_x000D_
    overflow: auto;_x000D_
    overflow-x: hidden;_x000D_
}

<div class="container">_x000D_
<ul>_x000D_
  <li>Item 1</li>_x000D_
  <li>Item 2</li>_x000D_
  <li>Item 3</li>_x000D_
  <li>Item 4</li>_x000D_
  <li>Item 5</li>_x000D_
  <li>Item 6</li>_x000D_
  <li>Item 7</li>_x000D_
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>_x000D_
  <li>Item 9</li>_x000D_
  <li>Item 10</li>_x000D_
  <li>Item 11</li>_x000D_
  <li>Item 12</li>_x000D_
  <li>Item 13</li>_x000D_
  <li>Item 14</li>_x000D_
  <li>Item 15</li>_x000D_
  <li>Item 16</li>_x000D_
  <li>Item 17</li>_x000D_
</ul>_x000D_
</div>

Removes the HORIZONTAL scrollbar while ALLOWING for scroll and NOTHING more.

&::-webkit-scrollbar:horizontal {
  height: 0;
  width: 0;
  display: none;
}

&::-webkit-scrollbar-thumb:horizontal {
  display: none;
}

With overflow-y: scroll, the vertical scrollbar will always be there even if it is not needed. If you want y-scrollbar to be visible only when it is needed, I found this works:

.mydivclass {overflow-x: hidden; overflow-y: auto;}

If you don't have anything overflowing horizontally, you can also just use

overflow: auto;

and it will only show scrollbars when needed.

See The CSS Overflow Property

overflow-x: hidden;

To hide the scrollbar, but keep the behaviour.

div::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

There are limitations to this.

• https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Hide Scrollbars

step 1:

step 2:

 overflow: hidden; /* Hide scrollbars */

now go to add file .css in project and include file

To hide the horizontal scrollbar, we can just select the scrollbar of the required div and set it to display: none;

One thing to note is that this will only work for WebKit-based browsers (like Chrome) as there is no such option available for Mozilla.

In order to select the scrollbar, use ::-webkit-scrollbar

So the final code will be like this:

div::-webkit-scrollbar {
  display: none;
}

Use This chunk of code..

.card::-webkit-scrollbar {
  display: none;
}