Riesci a rendere il contenuto di overflow di un div scorrevole nel browser Android?Bug del browser Android? div overflow scrolling
È scorrevole in tutti gli altri browser moderni.
In iOS è scorrevole, tuttavia non mostra barre di scorrimento, ma è scorrevole tramite trascinamento.
Un semplice esempio: http://jsfiddle.net/KPuW5/1/embedded/result/
Sarà questo essere risolto al più presto?
Si potrebbe provare touchscoll.js per elementi div scorrevole
overflow: scroll; è supportato come di Android 3 (API 11).
Per una piattaforma multipiattaforma (ovvero iOS < = 4.3.2) Cubiq iScroll è una soluzione facile da implementare.
È possibile creare un DIV scorrevole in Android definendo gli stili della barra di scorrimento nel CSS. In questo articolo mostreremo come farlo: http://css-tricks.com/custom-scrollbars-in-webkit/
Potresti includere qui un breve esempio, per evitare che questa risposta diventi inutile se/quando quel link non funziona? –
In effetti mostra barre di scorrimento su Android 2.3, ma non rende il div scrollabile :( – Husky
Husky, lo provo su un Android 2.3 e funziona, forse il comportamento varia in dispositivi diversi. Prova con questa webapp: http://applications.frenys.com/webapp/ ? ref = dl & app = 116815031665454 (è necessario toccare/fare clic sulla parte vuota della traccia della barra di scorrimento) – juamp
Android 3.0 e superiori hanno il supporto per overflow:scroll, su < 3.0 è un'altra storia. Potresti avere un po 'di successo con i polyfill come iScroll, tuttavia ciò ha un costo. È difficile implementare su siti con layout complessi e devi chiamare un metodo ogni volta che cambia il contenuto del tuo sito. Anche l'utilizzo della memoria è un problema: su dispositivi già sottodimensionati, le prestazioni possono essere ritardate a causa di questi tipi di polyfill.
mi sento di raccomandare un approccio diverso: utilizzare Modernizr per rilevare il supporto per troppo pieno scorrimento, aggiungere una classe al tag html e l'uso che per riscrivere il CSS in modo che le pagine scorrono 'normalmente' invece di in una scatola.
/* For browsers that support overflow scrolling */
#div {
height: 400px;
overflow: auto;
}
/* And for browsers that don't */
html.no-overflowscrolling #div {
height: auto;
}
Penso che l'approccio consigliato sia basato su un equivoco. Il test di overflow di Modernizr non è se 'overflow: scroll' funziona nel browser, ma se il browser ha il supporto per la proprietà css' * -overflow-scrolling ', che è differente. – speedarius
Solo per completezza:
Le barre di scorrimento sono in realtà c'è in Android 2.3, ma sono molto buggy e di default sono in stile di avere 0 larghezza, in modo che siano invisibili.
È possibile renderli visibili con l'aggiunta di uno stile simile:
::-webkit-scrollbar {
width: 30px;
}
::-webkit-scrollbar-track {
background-color: $lightestgrey;
}
::-webkit-scrollbar-thumb {
background-color: $lightgrey;
}
Tuttavia, l'elemento pollice non è trascinabili, si può muovere solo toccando la pista di sotto o al di sopra di esso.
Inoltre, questi stili cambieranno l'aspetto delle barre di scorrimento in tutti i browser Webkit, quindi è meglio aggiungere una classe valida solo per Android 2.3.
Si tratta di un bug: http://code.google.com/p/android/issues/detail?id=6864 Ci sono diversi work-around: http://cubiq.org/iscroll-4 piuttosto di questi hack - il bug dovrebbe essere corretto, con tutto il clamore intorno all'HTML mi stupisco di quanto male sia implementato. – mercador
questo sembra essere risolto ora. alcuni SDK non hanno le ultime visualizzazioni Web e possono ancora avere questo problema anche se – neaumusic