Hacer que la barra de desplazamiento principal esté siempre visible


Respuestas:


333
html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

Esto hace que la barra de desplazamiento esté siempre visible y solo activa cuando sea necesario.

Actualización: si lo anterior no funciona, simplemente usando esto puede.

html {
    overflow-y:scroll;
}

3
¿Tienes alguna idea de qué versión de FF trajo soporte overflow-y? Como parece que -moz-scrollbars-verticalestá en desuso a favor de la overflow-ypropiedad.
Ionuț G. Stan

Creo que Internet Explorer 6.x +, Firefox 1.5+, si no recuerdo mal. He estado usando el código anterior y funciona en FF1.5-3.5.1 e IE6-8 para mí.
Corv1nus el

2
¿Hay alguna alternativa al "salto de página" cuando ciertas páginas de su sitio son demasiado pequeñas para tener una barra de desplazamiento y otras lo son? ¿O es esta la "mejor práctica"? Tengo que admitir que no veo muchas páginas en las webs que no ocupen una página completa.
Jess

2
No estoy seguro de si es una práctica recomendada, pero tener barras de desplazamiento en todas las páginas y estar activo solo cuando sea necesario para evitar el salto de página suele ser una solución aceptable. Tiendo a preferir la barra de desplazamiento constante sobre el salto.
Corv1nus

1
Para aquellos (como yo) que encuentran el estilo htmlun poco hack-y , tenga en cuenta que puede usar el pseudo-selector estructural en :rootlugar de html. Ver: developer.mozilla.org/en-US/docs/Web/CSS/:root
Rounin

31

Asegúrese de que el desbordamiento esté configurado en "desplazamiento", no en "automático". Con eso dicho , en OS X Lion, el desbordamiento configurado como "desplazamiento" se comporta más como automático en que las barras de desplazamiento solo se mostrarán cuando se usen. Entonces, si alguna de las soluciones anteriores no parece estar funcionando, ese podría ser el motivo.

Esto es lo que necesitará para solucionarlo:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Puede diseñarlo en consecuencia si no le gusta el valor predeterminado.


1
Esta cosa funciona! Pero, ¿cómo puedes hacerlo solo en un div específico?
Rico

@Rich como cualquier otro elemento CSS. .yourdiv :: - webkit-scrollbar {...}
Kris

@ Kris Hola, gracias por la respuesta, aquí está el ejemplo. stackoverflow.com/a/54667091/2637261
Rico

¿Por qué se usa esto-webkit-appearance: none;
Suraj Jain

¡Esto es genial! Debería ser la respuesta aceptada.
Cyberpunker

25

Las cosas han cambiado en los últimos años. Las respuestas anteriores ya no son válidas en todos los casos. Apple está presionando las barras de desplazamiento que desaparecen en todas partes. Safari, Chrome e incluso Firefox en MacOs (e iOs) solo muestran barras de desplazamiento cuando realmente se desplazan: no sé sobre Windows / IE actual. Sin embargo, hay formas no estándar de diseñar barras de desplazamiento en Webkit (IE lo dejó hace mucho tiempo).


pero se degrada con gracia en esos nuevos?
Ben

3
Gracias por este excelente punto en las barras de desplazamiento que desaparecen. Para mí, la razón para mantener visible la barra de desplazamiento era evitar ese tirón leve pero muy notable y muy molesto a medida que el contenido cambia de tener desplazamiento a no. Con las barras de desplazamiento que desaparecen, no sacuden el cuerpo cuando se muestran y se esconden, así que está bien para mí. Pero gracias por este excelente punto.
Noitidart

44
Desde el punto de vista de UX, la mayoría de las veces queremos que la barra de desplazamiento sea visible. Según la tendencia actual, si una barra de desplazamiento no está visible, es un paso adicional tener que "probar" una lista visible para obtener más información en la lista. Una pista visual adicional de que el menú desplegable o la lista tiene más elementos no es necesaria si las personas ven una barra de desplazamiento.
windsurf88

24
html {
    overflow-y: scroll;
}

¿Es eso lo que quieres?

Desafortunadamente, Opera 9.64 parece ignorar esa declaración CSS cuando se aplica HTMLao BODY, aunque funciona para otros elementos de nivel de bloque como DIV.


13
html {height: 101%;}

Uso esta solución de navegadores cruzados (nota: siempre uso la declaración DOCTYPE en la primera línea, no sé si funciona en modo peculiar, nunca lo probé ).

Esto siempre mostrará una barra de desplazamiento vertical ACTIVO en cada página, la barra de desplazamiento vertical será desplazable solo de unos pocos píxeles.

Cuando el contenido de la página sea más corto que el área visible del navegador (puerto de visualización), todavía verá la barra de desplazamiento vertical activa, y se podrá desplazar solo unos pocos píxeles.

En caso de que esté obsesionado con la validación CSS (estoy obsesionado solo con la validación HTML) al usar esta solución, su código CSS también se validaría para W3C porque no está utilizando atributos CSS no estándar como -moz-scrollbars-vertical


1
Solución elegante
Artur Keyan

12

body { height:101%; } "recortará" páginas más grandes.

En cambio, uso:

body { min-height:101%; }

1
Esta pregunta se hizo hace 5 años y ya tiene una respuesta aceptada. Su respuesta no proporciona una mejor respuesta que la respuesta ya aceptada.
Dipen Shah

18
Esta respuesta realmente proporciona información adicional que no se proporciona en las otras respuestas.
GaTechThomas

2

Pude hacer que esto funcione al agregarlo a la etiqueta del cuerpo. Fue mejor para mí porque no tengo nada en el elemento html.

body {
    overflow-y: scroll;
}

2

Un enfoque alternativo es establecer el ancho del elemento html en 100vw. En muchos, si no en la mayoría de los navegadores, esto niega el efecto de las barras de desplazamiento en el ancho.

html { width: 100vw; }

0

Establecer la altura al 101% es mi solución al problema. Sus páginas ya no se 'moverán' al cambiar entre las que exceden la altura de la ventana gráfica y las que no.


0
body { 
    min-height: 101vh; 
} 

funciona mejor para mi


0

Hago esto:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Entonces no tengo que mirar la barra de desplazamiento fea y gris cuando no es necesaria.


La pregunta pide que siempre esté visible.
Corv1nus
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.