How do I remove the horizontal scrollbar in a div?

Question

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

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

Carrera

Answer 1

overflow-x: hidden;

Fortitude

it's a bad solution. Because in this case you just hide horizontal scroll in container. But if this container is too wide your content will not be fit in your container. – Hillier

Answer 2

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

The code should be:

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

Major

Answer 3

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.

Benner

Answer 4

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;}

Nosography

Answer 5

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;
}

Crappie

Answer 6

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

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

Mazurek

Answer 7

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;
}

Elsey

Thanks for apparently being the only person on the internet accurately answering this lol! Nice one – Shien

Answer 8

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;
}

Tympanum

OP needs scrolling without scrollbar – Us

Answer 9

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

html, body {
    overflow-x: hidden;
}

Longanimity

Answer 10

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

Eastwood

Answer 11

overflow-x:hidden;

However, it may happen that your content on the website may not show. So best to inspect element and check the widths of your divs or sections, and remove any right/left margins it may have put in extra. Much better solution

Whelm

Answer 12

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 {
    font-family: sans-serif;
}

.nowrap {
    white-space: nowrap;
}

.container {
    height: 200px;
    width: 300px;
    padding 10px;
    border: 1px solid #444;

    overflow: auto;
    overflow-x: hidden;
}

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

Lavoie

Answer 13

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

Supercharger

Answer 14

Use This chunk of code..

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

Abed

This does remove both scrollbars (y and x). Still a good indication though – Inconsistent

Answer 15

Hide Scrollbars

step 1:

go to any browser for example Google Chrome
click on keyboard ctrl+Shift+i inspect use open tools Developer

step 2:

Focused mouse on the div and change style div use try this:

 overflow: hidden; /* Hide scrollbars */

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

Hamil

Answer 16

lastly i encountered this issue the overflow-x property did not help me and i think its a banal solution, i recommend to inspect and check the elements that are potentially big and take more size than the other elements in your page, don't forget to check the width of some of your container the width based on view (vw) property can restrict your containers and its so practical. good luck.

Kyla

Answer 17

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;

Scrutineer