iPad safari: wyłączenie przewijania i efekt odbicia?
Pracuję nad aplikacją opartą na przeglądarce, obecnie rozwijam i stylizuję przeglądarkę iPad safari.
Szukam dwóch rzeczy na iPadzie: Jak mogę wyłączyć przewijanie w pionie dla stron, które tego nie wymagają? jak Mogę wyłączyć efekt sprężystego odbicia?
12 answers
2011 odpowiedź: dla aplikacji web/html działającej w iOS Safari chcesz coś takiego
document.ontouchmove = function(event){
event.preventDefault();
}
W przypadku iOS 5 możesz wziąć pod uwagę następujące elementy: document.ontouchmove i przewijanie na iOS 5
Aktualizacja Wrzesień 2014:
Bardziej szczegółowe podejście można znaleźć tutaj: https://github.com/luster-io/prevent-overscroll . do tego i wiele przydatnych porad webapp, zobacz http://www.luster.io/blog/9-29-14-mobile-web-checklist.html
Aktualizacja Marzec 2016: ten ostatni link nie jest już aktywny-zobacz https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html{[5]zamiast wersji zarchiwizowanej. Dzięki @falsarella za wskazanie tego.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-22 15:55:26
Możesz również zmienić pozycję body / html na fixed:
body,
html {
position: fixed;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-14 13:51:31
Aby zapobiec przewijaniu w nowoczesnych przeglądarkach mobilnych, musisz dodać passive: false. Ciągnąłem włosy, aby to działało, dopóki nie znalazłem tego rozwiązania. Znalazłem to wymienione tylko w jednym innym miejscu w Internecie.
function preventDefault(e){
e.preventDefault();
}
function disableScroll(){
document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-16 09:02:43
Możesz użyć tego fragmentu kodu jQuery:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
Spowoduje to zablokowanie przewijania w pionie, a także efektu odbicia pojawiającego się na stronach.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-06 12:42:02
Wiem, że jest to nieco off-piste, ale używałem Swiffy do konwersji Flasha w interaktywną grę HTML5 i natknąłem się na ten sam problem z przewijaniem, ale nie znalazłem żadnych rozwiązań, które działały.
Problem polegał na tym, że Swiffy stage zajmował cały ekran, więc gdy tylko się załadował, Zdarzenie touchmove dokumentu nigdy nie zostało uruchomione.
Jeśli próbowałem dodać to samo zdarzenie do kontenera Swiffy, zostało ono zastąpione zaraz po załadowaniu sceny.
In the end Rozwiązałem to (dość bałagan), stosując Zdarzenie touchmove do każdego DIV na scenie. Ponieważ te divy również ciągle się zmieniały, musiałem je sprawdzać.
To było moje rozwiązanie, które wydaje się działać dobrze. Mam nadzieję, że jest to pomocne dla każdego, kto próbuje znaleźć to samo rozwiązanie, co ja.var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
'touchmove',
function(e) {
e.preventDefault();
}
);}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-25 19:25:25
overflow: scroll;
-webkit-overflow-scrolling: touch;
Na kontenerze można ustawić efekt odbicia wewnątrz elementu
Źródło: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-20 09:50:28
var xStart, yStart = 0;
document.addEventListener('touchstart', function(e) {
xStart = e.touches[0].screenX;
yStart = e.touches[0].screenY;
});
document.addEventListener('touchmove', function(e) {
var xMovement = Math.abs(e.touches[0].screenX - xStart);
var yMovement = Math.abs(e.touches[0].screenY - yStart);
if((yMovement * 3) > xMovement) {
e.preventDefault();
}
});
Zapobiega domyślnemu przewijaniu i odbijaniu gestów Safari bez odłączania słuchaczy zdarzeń dotykowych.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-04 13:24:23
Żadne z rozwiązań nie działa dla mnie. Tak to robię.
html,body {
position: fixed;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-05 18:10:45
Testowane w iphone. Wystarczy użyć tego css na kontenerze elementu docelowego i zmieni to zachowanie przewijania, które zatrzymuje się, gdy palec opuści ekran.
-webkit-overflow-scrolling: auto
Https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-13 14:23:37
Dla tych, którzy używają aplikacji MyScript i zmagają się z przewijaniem/przeciąganiem ciała (na iPadzie i tabletach) zamiast pisać:
<body touch-action="none" unresolved>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-30 19:24:54
Możesz użyć js do zapobiegania przewijaniu:
let body = document.body;
let hideScroll = function(e) {
e.preventDefault();
};
function toggleScroll (bool) {
if (bool === true) {
body.addEventListener("touchmove", hideScroll);
} else {
body.removeEventListener("touchmove", hideScroll);
}
}
I niż tylko uruchomić / zatrzymać toggleScroll func gdy opnen / close modal.
Like this toggleScroll(true) / toggleScroll(false)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-03 12:33:34
Podobne do angry kiwi mam go do pracy na wysokości, a nie pozycji:
html,body {
height: 100%;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-12 13:02:07