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

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 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 para que en algunas páginas parezca que hay más contenido, pero esto no funciona para todas ellas.

Estoy usando un Mac, y en Chrome y Safari la barra de desplazamiento vertical solo se mostrará cuando el el ratón está sobre el Div y se desplaza activamente. ¿Hay alguna manera de que siempre se muestre?

Author: Mosh Feu, 2011-09-21
Source

4 answers

Acabo de encontrarme con este problema. OSx Lion oculta barras de desplazamiento mientras no está en uso para que parezca más "resbaladizo", 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 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);
    }
}

Personalice la apariencia según sea necesario. Fuente

 313
Author: NoviceCoding,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-27 12:15:32

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

 9
Author: Razan Paul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-24 01:47:56

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

También, hay un post duplicado aquí en Stack Overflow que tiene algunos otros detalles.

 0
Author: JStarcher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:37

Esto hará que las barras de desplazamiento siempre se muestren cuando hay contenido dentro de Windows que debe desplazarse para acceder, se aplica a todas las ventanas y todas las aplicaciones en el Mac:

Inicie Preferencias del sistema desde el menú de Apple Haga clic en el panel de configuración" General" Busque 'Mostrar barras de desplazamiento' y seleccione la radiobox junto a " Siempre" Cerrar fuera de las preferencias del Sistema cuando termine

 -4
Author: Michelle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-04 15:54:47