Cómo obtener la barra de desplazamiento con desbordamiento de CSS en iOS

Al desarrollar un sitio web para iPad, traté de usar la propiedad CSS overflow: autopara obtener las barras de desplazamiento si es necesario en un div, pero mi dispositivo se niega a mostrarlas incluso si el desplazamiento con dos dedos funciona.

Lo intenté con

overflow: auto;

y

overflow: scroll;

y el resultado es el mismo.

Solo estoy probando en un iPad (en los navegadores de escritorio funciona perfectamente).

¿Algunas ideas?

Edite siguiendo el comentario dejado, amablemente, por kritzikratzi :

[Comenzando] con ios 5beta -webkit-overflow-scrolling: touchse puede agregar una nueva propiedad que debería resultar en el comportamiento esperado.

Algunas lecturas adicionales, pero muy pocas:

• Desplazamiento de impulso nativo en iOS 5

Respuesta original , dejada para la posteridad.

Desafortunadamente overflow: auto, ni , ni scroll, produce barras de desplazamiento en los dispositivos iOS, aparentemente debido al ancho de pantalla que se tomaría en mecanismos tan útiles.

En cambio, como ha descubierto, los usuarios deben realizar el deslizamiento de dos dedos para desplazarse por el overflowcontenido -ed. La única referencia, ya que no puedo encontrar el manual del teléfono en sí, que pude encontrar está aquí: tuaw.com: iPhone 101: Desplazamiento con dos dedos .

La única solución que se me ocurre para esto es si pudiera usar algo de JavaScript, y tal vez jQTouch, para crear sus propias barras de desplazamiento para los overflowelementos. Alternativamente, puede usar las consultas @media para eliminar overflowy mostrar el contenido en su totalidad, como usuario de iPhone, esto obtiene mi voto, aunque solo sea por la pura simplicidad. Por ejemplo:

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

El código anterior proviene de A List Apart , del mismo artículo vinculado anteriormente (no estoy seguro de por qué se fueron type="text/css", pero supongo que hay razones.

Aplicar este código en su css

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

He hecho algunas pruebas y usando CSS3 para redefinir las barras de desplazamiento funciona y puedes mantener tu Overflow:scroll;oOverflow:auto

Terminé con algo como esto ...

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #eee; 
    border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
} 

El único inconveniente que aún no he podido descubrir es cómo interactuar con las barras de desplazamiento en iProducts, pero puede interactuar con el contenido para desplazarlo.

Solución dada por Chris Barr aquí

function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

function touchScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
    }
}

Funciona bien para mi. Elimine event.preventDefault si necesita usar algunos clics ...

La biblioteca de JavaScript iScroll4 lo arreglará de inmediato. Tiene un hideScrollbarmétodo que puede configurar falsepara evitar que la barra de desplazamiento desaparezca.

Otras 2 personas en SO propusieron una posible solución solo de CSS al problema. La solución de David Thomas es perfecta, pero tiene el límite de que la barra de desplazamiento solo es visible durante el desplazamiento.

Para tener las barras de desplazamiento siempre visibles, es posible seguir las pautas sugeridas en los siguientes enlaces:

• ¿Cómo puedo evitar que las barras de desplazamiento se oculten para los usuarios del trackpad de OS X en WebKit / Blink?
• CSS - Desbordamiento: Desplazamiento; - ¿Mostrar siempre la barra de desplazamiento vertical?

asegúrese de que su cuerpo y divs no tengan un

  position:fixed

de lo contrario no funcionaría

En mi experiencia, debe asegurarse de que el elemento se haya display:block;aplicado para -webkit-overflow-scrolling:touch;que funcione.

Funciona bien para mí, intente:

.scroll-container {
  max-height: 250px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

Utilice este código, funciona en ios / android APP webview; Elimina algunos códigos CSS que no son portátiles;

Si está tratando de lograr un desplazamiento horizontaldiv con el toque en un dispositivo móvil, la corrección de CSS actualizada no funciona (probado en múltiples versiones de Android Chrome y iOS Safari), por ejemplo:

-webkit-overflow-scrolling: touch

Encontré una solución y la modifiqué para el desplazamiento horizontal desde antes del truco CSS. Lo probé en Android Chrome y iOS Safari y los eventos táctiles del oyente existen desde hace mucho tiempo, por lo que tiene un buen soporte: http://caniuse.com/#feat=touch .

Uso:

touchHorizScroll('divIDtoScroll');

Funciones:

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}  

Modificado de la solución vertical (pre truco CSS):

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/