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?

回答1:

overflow-x: hidden;

回答2:

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

The code should be:

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

回答3:

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

回答4:

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.

回答5:

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

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

回答6:

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

回答7:

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

html, body {
    overflow-x: hidden;
}

回答8:

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

回答9:

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

回答10:

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>