que - overflow css3

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

Question

Así que actualmente tengo:

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

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

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

Answer 1

Acabo de toparme con este problema yo mismo. OSx Lion oculta las barras de desplazamiento mientras no está en uso para que parezca más "resbaladiza", pero al mismo tiempo surge el problema al que nos referimos: a veces las personas no pueden ver si un div tiene una función de desplazamiento o no.

La solución: en tu css incluye -

@media(device-width: 768px) and (device-height: 1024px){
    ::-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);
    }
}

personalizar la apariencia según sea necesario. Source

Answer 2

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

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

Answer 3

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 configuraciones "General" Busque "Mostrar barras de desplazamiento" y seleccione la radio junto a "Siempre" Cierre de las Preferencias del Sistema cuando haya terminado

Answer 4

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