CSS - Desbordamiento: desplazamiento; - Mostrar siempre la barra de desplazamiento vertical?

224

Entonces actualmente tengo:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

Sin embargo, no creo que sea obvio para algunos usuarios que haya más contenido allí. Podrían desplazarse hacia abajo en la página sin saber que mi div en realidad contiene mucho más contenido. Utilizo la altura 510px para cortar algo de texto, por lo que en algunas páginas parece que hay más contenido, pero esto no funciona para todos.

Estoy usando una Mac, y en Chrome y Safari, la barra de desplazamiento vertical solo se mostrará cuando el mouse esté sobre el Div y usted se desplace activamente. ¿Hay alguna manera de que siempre se muestre?

Jambo
fuente
44
Uhm, ¿puede recrear este comportamiento exacto en jsFiddle ? El CSS que proporcionó debe forzar una barra de desplazamiento para estar presente todo el tiempo.
sg3s
1
Sí, parece que tienes otras peculiaridades de CSS que causan eso, esto debería mostrar la barra de desplazamiento siempre. Asegúrate de que la envoltura del div esté bien diseñada.
Shawn Steward
Estoy corriendo Lion! Tal vez eso es todo? Abriré una máquina virtual y veré cómo es en el lado de las ventanas ...
Jambo
1
Maldición, mi mal! Es una característica en Lion. Realmente debería leer lo que estoy comprando antes de comprarlo ... ¡Gracias chicos!
Jambo

Respuestas:

386

Acabo de encontrarme con este problema yo mismo. OSx Lion oculta las barras de desplazamiento mientras no está en uso para que parezca más "elegante", pero al mismo tiempo surge el problema que abordó: la gente a veces no puede ver si un div tiene una función de desplazamiento o no.

La solución: en su CSS incluir -

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

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

personalizar la apariencia según sea necesario. Fuente

NovatoCoding
fuente
66
¿Esto también debería funcionar en el iPad con Safari? Estoy en un iPad 2 con iOS 6.1.3 y no funciona.
crmpicco
66
¿Hay alguna manera de hacer que esto solo se aplique a una clase específica?
futbolpal
2
Funcionó para mí solo después de configurar 'overflow: auto' en el contenedor (en mi caso, un <ul>). ¡Gracias!
Rob Campion
8
@futbolpal sí, esto parece funcionar en una clase; pruebe .classname :: - webkit-scrollbar
Chase
44
¿Cómo puedo hacer que esto funcione horizontalmente? la barra aparece para desplazamiento vertical pero no desplazamiento horizontal
BritishSam
14

Tenga en cuenta que en iPad Safari, la solución de NoviceCoding no funcionará si lo ha hecho, webkit-overflow-scrolling: touch;en algún lugar de su CSS. La solución es eliminar todas las ocurrencias -webkit-overflow-scrolling: touch;o poner -webkit-overflow-scrolling: auto;con la solución de NoviceCoding.

Razan Paul
fuente
3
¿Es posible tener ambos en nuestro css - webkit-overflow-scrolling: touch y las barras de desplazamiento?
Julsy
1

Esto funcionará con iPad en Safari en iOS 7.1.x de mis pruebas, aunque no estoy seguro sobre iOS 6. Sin embargo, no funcionará en Firefox. Hay un complemento jQuery que pretende ser compatible con varios navegadores llamado jScrollPane .

Además, hay una publicación duplicada aquí en Stack Overflow que tiene algunos otros detalles.

JStarcher
fuente
55
Tenga en cuenta que esta pregunta se hizo hace 2 años, incluso antes de que existiera iOS6.
OGHaza
webkit es solo safari chrome. Tendrá que apuntar al motor específico de Firefox
TigerBear
-4

Esto hará que las barras de desplazamiento siempre se muestren cuando haya contenido dentro de las ventanas que se debe desplazar para acceder, se aplica a todas las ventanas y todas las aplicaciones en la Mac:

Inicie Preferencias del sistema desde el menú  Apple Haga clic en el panel de configuración "General" Busque 'Mostrar barras de desplazamiento' y seleccione la casilla de radio junto a "Siempre" Cierre las Preferencias del sistema cuando haya terminado

Michelle
fuente
18
Esto responde a la pregunta, más o menos, pero es una solución del lado del cliente en lugar de solucionarlo del lado del servidor. Entonces, es algo que el usuario de la página web tiene que hacer, stackoverflow es un sitio de programación, por lo que las personas generalmente vienen aquí para encontrar la solución de código en lugar de una forma para que el usuario cambie la configuración de su navegador.
Eric Leschinski