Come ottenere la barra di scorrimento con overflow CSS su iOS

Question

Sviluppo di un sito Web iPad Ho provato a utilizzare la proprietà CSS overflow: auto per ottenere le barre di scorrimento se necessario in un div, ma il mio dispositivo si rifiuta di mostrarle anche se le due dita scorrono sta lavorando.

Ho provato con

overflow: auto; 

e

overflow: scroll; 

e il risultato è lo stesso.

Sto solo testando su un iPad (sui browser desktop funziona perfettamente).

Qualche idea?

Answer 1

Modifica seguito il commento a sinistra, gentilmente, per kritzikratzi:

[Avvio] con ios 5beta una nuova proprietà -webkit-overflow-scrolling: touch può essere aggiunto, che dovrebbe comportare il comportamento previsto.

Alcuni, ma molto poco, ulteriori letture:

• Native momentum scrolling in iOS 5

---

risposta originale, a sinistra per i posteri.

Sfortunatamente né overflow: auto, o scroll, produce barre di scorrimento sui dispositivi iOS, apparentemente a causa della larghezza dello schermo che sarebbe stata presa su tali meccanismi utili.

Invece, come hai scoperto, gli utenti devono eseguire lo scorrimento con due dita per scorrere il contenuto di overflow. L'unico riferimento, dal momento che non riesco a trovare il manuale per il telefono stesso, ho potuto trovare è qui: tuaw.com: iPhone 101: Two-fingered scrolling.

L'unico modo per aggirare il problema a questo proposito è se è possibile utilizzare JavaScript e forse jQTouch per creare barre di scorrimento personalizzate per gli elementi overflow. In alternativa puoi usare @media queries per rimuovere lo overflow e mostrare il contenuto per intero, come utente di iPhone, questo è il mio voto, se non altro per la semplice semplicità. Per esempio:

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

Il codice precedente viene da A List Apart, dallo stesso articolo collegato a sopra (non sono sicuro perché hanno lasciato del type="text/css", ma suppongo ci sono ragioni

Answer 2

Il. iScroll4 la libreria javascript lo risolverà e dispone di un metodo hideScrollbar che è possibile impostare su false per impedire la scomparsa della barra di scorrimento.

Answer 3

soluzione data da 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); 
    } 
} 

funziona bene per me. Rimuovere event.preventDefault se è necessario utilizzare alcuni clic ...

Answer 4

Nella mia esperienza è necessario assicurarsi che l'elemento abbia display:block; richiesto per il -webkit-overflow-scrolling:touch; per funzionare.

Answer 5

Altre 2 persone su SO hanno proposto la soluzione solo CSS per il problema. La soluzione di David Thomas è perfetta ma ha il limite che la barra di scorrimento è visibile solo durante lo scorrimento.

Al fine di avere barre di scorrimento sempre visibili, è possibile followin linee guida suggerite sui seguenti link:

• 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

ho fatto alcuni test e l'utilizzo di CSS3 per ridefinire le barre di scorrimento funzionano e puoi mantenere il tuo Overflow:scroll; o Overflow:auto

Ho finito con qualcosa di simile ...

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

L'unico lato negativo che non ho ancora avuto modo di capire è come interagire con le barre di scorrimento su iProducts ma è possibile interagire con il contenuto per scorrere si

Answer 7

Applicare questo codice nel tuo 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

assicurarsi che il corpo e div non hanno una

position:fixed 

altrimenti non avrebbe funzionato

Answer 9

Se si sta tentando di raggiungere orizzontale div scorrimento con un tocco sul cellulare, la correzione CSS aggiornata non funziona (testato su Android Chrome e iOS Safari più versioni), per esempio:

-webkit-overflow-scrolling: touch 

Ho trovato una soluzione e l'ho modificata per lo scorrimento orizzontale da prima del trucco CSS. L'ho provato su Android Chrome e iOS Safari e gli eventi di ascolto degli ascoltatori sono in circolazione da molto tempo, quindi ha un buon supporto: http://caniuse.com/#feat=touch.

utilizzo:

touchHorizScroll('divIDtoScroll'); 

Funzioni:

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

modificati dalla soluzione verticale (pre trucco CSS):

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

Answer 10

funziona bene per me, per favore prova:

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

utilizzare questo codice, funziona in ios/android WebView APP; Elimina alcuni codici css non portatili;