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

poner scroll a un div

Question

Desarrollo de un sitio web de iPad Intenté usar el overflow: auto propiedad de CSS overflow: auto para obtener las barras de desplazamiento si es necesario en un div , pero mi dispositivo se niega a mostrarlas incluso si el desplazamiento de 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?

Answer 1

Aplica este código en tu 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);
}

Answer 2

Funciona bien para mí, por favor intente:

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

Answer 3

He hecho algunas pruebas y uso de CSS3 para redefinir las barras de desplazamiento y puedes mantener tu Overflow:scroll; o Overflow: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 descifrar es cómo interactuar con las barras de desplazamiento en iProducts, pero puedes interactuar con el contenido para desplazarlo

Answer 4

La biblioteca javascript iScroll4 lo arreglará directamente. Tiene un método hideScrollbar que puedes establecer en false para evitar que la barra de desplazamiento desaparezca.

Answer 5

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

Para tener 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 usuarios de panel táctil OS X en WebKit / Blink?
• CSS - Desbordamiento: desplazamiento; - ¿Mostrar siempre la barra de desplazamiento vertical?

Answer 6

Según mi experiencia, debes asegurarte de que el elemento tenga display:block; aplicado para -webkit-overflow-scrolling:touch; trabajar.

Answer 7

Si está tratando de lograr el desplazamiento div horizontal con toque en el móvil, la corrección CSS actualizada no funciona (probado en versiones múltiples 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 de CSS. Lo probé en Android Chrome y iOS Safari, y los eventos táctiles de escucha han durado bastante tiempo, por lo que cuenta con 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 CSS truco):

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

Answer 8

Solución dada por Chris Barr here

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 mí Elimine event.preventDefault si necesita usar algunos clics ...

Answer 9

asegúrese de que su cuerpo y divs no tengan

  position:fixed

de lo contrario no funcionaría

Answer 10

Edite siguiendo el comentario dejado, amablemente, por kritzikratzi :

[Comenzando] con ios 5beta una nueva propiedad -webkit-overflow-scrolling: touch se puede agregar -webkit-overflow-scrolling: touch que debería dar como resultado el comportamiento esperado.

Algo, pero muy poco, lectura adicional:

• Momento de desplazamiento nativo en iOS 5

Respuesta original , dejada para la posteridad.

Lamentablemente, ni overflow: auto , o 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 encontrado, los usuarios deben realizar deslizar dos dedos para desplazarse por el contenido overflow . La única referencia, dado que no puedo encontrar el manual del teléfono, podría encontrarla aquí: tuaw.com: iPhone 101: desplazamiento con dos dedos .

La única solución alternativa que puedo pensar para esto, es si es posible que use algo de JavaScript, y tal vez jQTouch, para crear sus propias barras de desplazamiento para los elementos de overflow . Alternativamente, podría usar las consultas de @media para eliminar el overflow y mostrar el contenido completo, ya que como usuario de iPhone, esto obtiene mi voto, aunque solo sea por la 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 salieron de type="text/css" , pero supongo que hay razones.

Answer 11

::-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 la vista web de la aplicación ios / android; Elimina un código CSS no portátil;