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

Question

Desarrollando un sitio web de iPad Intenté usar la propiedad CSS overflow: auto para obtener las barras de desplazamiento si es necesario en un div, pero mi dispositivo se niega a mostrarlas aunque los dos dedos se deslicen está trabajando.

he intentado 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).

¿Alguna idea?

Answer 1

Editar siguiendo el comentario a la izquierda, por favor, por kritzikratzi:

[Arranque] con ios 5beta una nueva propiedad se puede añadir -webkit-overflow-scrolling: touch que debería traducirse en el comportamiento esperado.

Algunos, pero muy poco, la lectura adicional:

• Native momentum scrolling in iOS 5

---

Respuesta original, dejó para la posteridad.

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

En su lugar, como ha encontrado, los usuarios deben realizar deslizar dos dedos para desplazarse por el contenido overflow -ed. La única referencia, dado que no puedo encontrar el manual del teléfono, podría encontrarla aquí: tuaw.com: iPhone 101: Two-fingered scrolling.

Lo único que se me ocurre 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 overflow. Alternativamente, puede usar @media queries 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 a arriba (no estoy seguro de por qué se fueron de la type="text/css", pero supongo que hay razones

Answer 2

El. iScroll4 javascript library lo arreglará bien. Tiene un método hideScrollbar que puede establecer en false para evitar que la barra de desplazamiento desaparezca.

Answer 3

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í. Eliminar event.preventDefault si necesita utilizar algunos clics ...

Answer 4

En mi experiencia debe asegurarse de que el elemento tenga display:block; aplicado para el -webkit-overflow-scrolling:touch; para funcionar.

Answer 5

Otros 2 personas 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.

el fin de tener barras de desplazamiento siempre visibles, es posible followin directrices sugeridas en los siguientes enlaces:

• How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?
• CSS - Overflow: Scroll; - Always show vertical scroll bar?

Answer 6

me han hecho algunas pruebas y el uso de CSS3 para redefinir las barras de desplazamiento funcionan y usted puede mantener su 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); 
} 

La única pega, que todavía no he podido averiguar es cómo interactuar con las barras de desplazamiento en iProducts pero se puede interactuar con el contenido para desplazarse que

Answer 7

Aplicar 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 8

asegurarse de que su cuerpo y divs no tienen un

position:fixed 

de lo contrario no funcionaría

Answer 9

Si usted está tratando de lograr horizontal div desplazamiento con un toque en el móvil, la solución CSS actualización no funciona (probado en Android Chrome y iOS Safari múltiples versiones), por ejemplo:

-webkit-overflow-scrolling: touch 

Encontré una solución y la modifiqué para el desplazamiento horizontal desde antes del truco de CSS. Lo he probado 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.

de 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 solución vertical (pre truco CSS):

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

Answer 10

funciona bien para mí, por favor intente:

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

Answer 11

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

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

utilizar este código, que funciona en iOS/Android WebView APP; Elimina un código CSS no portátil;