Ho creato una modale. Quando la modale è aperta, interrompo lo scorrimento su Desktop con overflow:hidden; su <body>. Sta funzionando.CSS: come impedire lo scorrimento su iOS Safari?
Ma non funziona sul mio iPhone 6s Mobile Safari.
Come è possibile evitare lo scorrimento quando la modal è aperta in Safari mobile?
Combinate con position: fixed per fare questo su iOS ...
overflow: hidden;
position: fixed;
non c'è (a mia conoscenza) un ottimo modo per ottenere questo risultato con i CSS, senza ripercussioni sulla UX.
Mentre è Javascript, e non i CSS, il modo migliore che ho trovato per farlo è il seguente:
// Disable scrolling.
document.ontouchmove = function (e) {
e.preventDefault();
}
// Enable scrolling.
document.ontouchmove = function (e) {
return true;
}
Se stai usando questo per le modali, è probabile che stai usando javascript comunque ... quindi funziona alla grande. Questa è la soluzione migliore che ho trovato, come impostazione della posizione: fissa ripristina la posizione di scorrimento sulla pagina. Se si abbina semplicemente a overflow: nascosto, funziona sia su desktop che su mobile e non ha effetto sulla posizione di scorrimento – TinMonkey
Questo plus "overflow: hidden" è l'unica cosa che sono riuscito a far funzionare –
Testato su Iphone 7. Questo non funziona. – Azarus
dispiace di far risorgere un vecchio thread, ma questa risposta funziona solo se il modale viene attivato mentre la pagina è scorsa fino in cima. Se la pagina scorre verso il basso, allora l'impostazione "position: fixed" ti farà tornare in cima prima di attivare il modal invece di lasciarti dove eri quando hai attivato il modal. C'è una soluzione che risolva anche questo? –
@ 0sin Imposta l'altezza del corpo su 'scrollHeight', quindi fissa i' 'bambini' e usa' transform: 'translateY (-' + body.scrollTop + 'px)' 'su di essi – aleclarson