¿Cómo elimino la barra de desplazamiento horizontal en un div?

Cuando configuro overflow: scroll, obtengo barras de desplazamiento horizontales y verticales.

¿Hay alguna manera de eliminar la barra de desplazamiento horizontal en un div?

overflow-x: hidden;

No olvides escribir overflow-x: hidden;

El código debe ser:

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

Con overflow-y: scroll, la barra de desplazamiento vertical siempre estará allí, incluso si no es necesaria. Si desea que la barra de desplazamiento y sea visible solo cuando sea necesario, encontré que esto funciona:

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

CSS

overflow-y: scroll;

Véalo en jsFiddle .

Tenga en cuenta que si elimina el -yde la overflow-ypropiedad, se muestra la barra de desplazamiento horizontal.

Agregue este código a su CSS. Deshabilitará la barra de desplazamiento horizontal.

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

Sin desplazamiento (sin especificar x o y):

.your-class {
   overflow: hidden;
}

Eliminar desplazamiento horizontal:

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

Eliminar desplazamiento vertical:

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

Para ocultar la barra de desplazamiento horizontal, solo podemos seleccionar la barra de desplazamiento del div requerido y configurarlo en display: none;

Una cosa a tener en cuenta es que esto solo funcionará para los navegadores basados ​​en WebKit (como Chrome) ya que no hay tal opción disponible para Mozilla.

Para seleccionar la barra de desplazamiento, use ::-webkit-scrollbar

Entonces el código final será así:

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

Para eliminar la barra de desplazamiento horizontal, use el siguiente código. Funciona al 100%.

html, body {
    overflow-x: hidden;
}

Si no tiene nada que se desborde horizontalmente, también puede usar

overflow: auto;

y solo mostrará barras de desplazamiento cuando sea necesario.

Ver la propiedad de desbordamiento de CSS

Utilizar:

overflow: auto;

Esto mostrará la barra de desplazamiento vertical y solo si hay un desbordamiento vertical, de lo contrario, estará oculto.

Si tiene un desbordamiento x e y, se mostrarán las barras de desplazamiento x e y.

Para ocultar la barra de desplazamiento x (horizontal), incluso si está presente, simplemente agregue:

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>

Para ocultar el scrollbar, pero mantener el comportamiento.

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

Hay limitaciones para esto.

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

Use este fragmento de código ...

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

Había estado teniendo problemas donde estaba usando

overflow: none;

Pero sabía que a CSS realmente no le gustaba y no funcionaba al 100% como yo quería.

Sin embargo, esta es una solución perfecta ya que se supone que ninguno de mi contenido es más grande de lo previsto y esto ha solucionado el problema que tenía.

overflow: auto;