html - quitar - personalizar scroll css

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

Question

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

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

Answer 1

CSS

overflow-y: scroll;

Véalo en jsFiddle .

Observe si elimina la propiedad -y de la propiedad overflow-y , se muestra la barra de desplazamiento horizontal.

Answer 2

Agrega este código a tu CSS. Deshabilitará la barra de desplazamiento horizontal.

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

Answer 3

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

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

Answer 4

He estado teniendo problemas donde estaba usando

overflow:none;

Pero sabía que a CSS realmente no le gustaba y no funcionaba al 100% de cómo yo quería.

Sin embargo, esta es una solución perfecta, ya que se supone que ninguno de mis contenidos es mayor de lo previsto y esto ha solucionado el problema que tenía.

overflow:auto;

Answer 5

No olvides escribir overflow-x:hidden;

el código debe ser

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

Answer 6

Si no tiene nada desbordado horizontalmente, también puede usar

overflow:auto;

y solo mostrará barras de desplazamiento cuando sea necesario.

http://css-tricks.com/the-css-overflow-property/

Answer 7

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

Answer 8

overflow-x: hidden;

Answer 9

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 xey, se mostrarán las barras de desplazamiento xey.

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>