Questa domanda richiede alcune spiegazioni, quindi per favore portami con me.Safari mobile: inerzia scorrendo sul corpo E minimo comportamento dell'interfaccia utente?
Contrariamente a quanto si crede, lo scorrimento a inerzia (lo scorrimento a 60 fps molto fluido) non è abilitato nelle pagine Web di Mobile Safari per impostazione predefinita. Come si fa un mondo di differenza nella user experience, ho permesso applicando dinamicamente questo CSS per l'elemento HTML e corpo della pagina, dopo un test Modernizr per iOS in particolare:
<style>
.touchscroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
height:100%;
}
.touchscroll body {
height:100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
}
</style>
Quanto sopra rende fondamentalmente la body element è un elemento scorrevole e per mezzo di -webkit-overflow-scrolling: touch, si ottiene l'effetto scorrimento continuo intertia sull'intera pagina. Qualche altro background su questa soluzione può essere trovato here (disclaimer: articolo da me stesso).
Funziona, finora, tutto bene. Il problema è che questa soluzione disabilita in modo efficace un altro comportamento altamente desiderato di Mobile Safari: normalmente, quando si scorre verso il basso, si riduce la barra degli indirizzi e si nasconde completamente la barra inferiore del browser. Riappaiono quando si esegue il backup.
Sfortunatamente, la tecnica sopra la disabilita per qualche motivo. Sì, abbiamo uno scroll super scorrevole, tuttavia la barra del browser è sempre grande e la barra in basso rimane permanentemente visibile, occupando entrambi spazio prezioso.
La mia domanda quindi è, posso avere entrambi? Voglio lo scorrimento super liscio su tutta la pagina, ma voglio anche il comportamento predefinito di nascondere gli elementi del browser durante lo scorrimento.
Un esempio di un sito in cui sto usando questo è qui: http://www.jungledragon.com/
Se si apre che in Safari Mobile, si vedrà lo scorrimento liscio, ma non l'occultamento di elementi del browser durante lo scorrimento verso il basso.
Grazie, ma non fa differenza. Per avere una scroll scorrevole su tutta la pagina, è necessario impostarlo a livello di corpo. Dopo averlo fatto, viene sempre visualizzata la barra degli indirizzi. – Ferdy