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

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?

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

/* always show scrollbars */

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


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

personalizar la apariencia según sea necesario. Fuente

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.

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.

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