Stworzyłem modal. Gdy modalny jest otwarty, zatrzymuję przewijanie na pulpicie z overflow:hidden; na <body>. To działa.CSS: Jak zapobiec przewijaniu w Safari na iOS?
Ale to nie działa w moim iPhone 6s Mobile Safari.
Jak mogę zapobiec przewijaniu, gdy modal jest otwarty w mobilnym safari?
W połączeniu z position: fixed to zrobić na iOS ...
overflow: hidden;
position: fixed;
Nie ma (według mojej wiedzy) wielką drogą do osiągnięcia tego z CSS bez reperkusji na UX.
Chociaż to JavaScript, a nie CSS, najlepszym sposobem znalazłem to zrobić jest następujący:
// Disable scrolling.
document.ontouchmove = function (e) {
e.preventDefault();
}
// Enable scrolling.
document.ontouchmove = function (e) {
return true;
}
Jeśli używasz tego w przypadku modałów, prawdopodobnie używasz javascript ... więc to działa świetnie. To jest najlepsze rozwiązanie, które znalazłem, jako ustawienie pozycji: fixed resetuje pozycję przewijania na stronie. Jeśli po prostu sparujesz to z przepełnieniem: ukryty, działa zarówno na komputery stacjonarne, jak i mobilne i nie powoduje przesunięcia pozycji – TinMonkey
To plus 'przepełnienie: ukryte' to jedyna rzecz, którą mogłem dostać do pracy –
Testowany na Iphone 7. To nie działa. – Azarus
Niestety wskrzesić stary wątek, ale ta odpowiedź działa tylko wtedy, modalna jest wyzwalany podczas przewijania strony do samej góry. Jeśli strona przewinie się w dół, ustawienie "position: fixed" przewinie cię z powrotem na górę, zanim wyzwolisz modal, zamiast pozostawiać cię tam, gdzie byłeś, gdy uruchomiłeś modal. Czy istnieje rozwiązanie, które również to rozwiązuje? –
@ 0sin Ustaw 'wysokość' ciała na jego 'scrollHeight', a następnie uczyń dzieci' fixed' i użyj 'transform: 'translateY (-' + body.scrollTop + 'px)'' na nich – aleclarson