Zapobieganie przewijaniu w przeglądarce mobilnej, bez uniemożliwiania ustawiania ostrości

Question

Używam funkcji preventDefault() na wykreślaczu dotykowym w dokumencie, aby zapobiec przewijaniu strony. Niestety to zapobiega zbyt wiele. Użytkownik nie może już skupić się na danych wejściowych (i otworzyć miękką klawiaturę). Używając jQuery focus(), mogę skupić się na danych wejściowych na touchstart. To otwiera miękką klawiaturę na iOS (przez większość czasu), ale nigdy na Androida.

Tło:

Mam stronę, że chcę, aby jak najwięcej jak w aplikacji mobilnej, jak to możliwe. Naprawdę interesuje mnie tylko system Android i iOS, ale każdy format. Zaczynam od tego, że zawartość strony jest dokładnie taka sama jak rozmiar ekranu. To jest miłe, dopóki użytkownik nie dotknie palcem strony. Muszę uniemożliwić przewijanie użytkownika. Następujący kod spełnia to, ale w nieco inny sposób na dwóch systemach operacyjnych.

$(document).on('touchstart', function(e) { 
    e.preventDefault(); 
}); 

iOS, to uniemożliwia elastyczną przewijanie: gdzie użytkownik może ujawnić teksturę tyłu stronie, próbując przejść na inną stronę. Ta funkcja jest dobra dla zwykłej strony internetowej, ale w moim przypadku pomniejsza UX.

W systemie Android zapobiega ujawnianiu przydatnego narzędzia, którego używam do ukrywania paska adresu. Przeglądarki Androida zaczynają się od widocznego paska adresu, ale gdy użytkownik przewinie stronę, znika. Aby programowo zmusić przeglądarkę do ukrycia paska adresu, po prostu dodaj ten wiersz kodu do funkcji wywoływanej podczas ładowania.

$('html, body').scrollTop(1); 

Jest to hacky (ale też jedynym) sposobem, aby powiedzieć, że przeglądarka w Androidzie mamy przewijane, a pasek adresu nie jest już konieczne.

Bez elementu zapobiegawczego w dokumencie przeglądarka Android umożliwia przewijanie, a pasek adresu może zostać ujawniony.

Tak więc, oba systemy operacyjne mają dobry powód, aby wywoływać funkcję preventDefault() przy każdym dotknięciu dotykowym na dokumencie, ale uniemożliwia to zbyt wiele. Stukanie w polu wprowadzania nic nie robi. Użycie wywołania jQuery focus() może pomóc, ale otwiera tylko klawiaturę programową w systemie iOS, a nie Android.

$('input').on('touchstart', function() { 
    $(this).focus(); 
}); 

Jak mogę zapobiec stronę z przewijania, ale korzystać z przeglądarki natywnej funkcjonalności do skupienia się na obszarach wejściowych?

Uwaga: Ten kod

$(document).on('touchstart', function(e) { 
    if (e.target.nodeName !== 'INPUT') { 
     e.preventDefault(); 
    } 
}); 

jest błędna, ponieważ użytkownik może nadal przewijać stronę, o ile początkowe dotykowy pochodzi z wewnątrz pola wejściowego.

Answer 1

Naprawdę rozwiązałem ten problem w innym projekcie, zapomniałem o nim i zapamiętałem go przez całą drogę poprzez wpisywanie tego.

Kluczem jest po prostu zrobić to na touchmove.

$(document).on('touchmove', function(e) { 
    e.preventDefault(); 
}); 

Jednak preventDefault na touchstart wykonuje wszelkie rodzaje miłych rzeczy jak zapobieganie obraz Zapisz menu na gest włączona slajdów. Moje projekty również to obejmują.

$(document).on('touchstart', function(e) { 
    if (e.target.nodeName !== 'INPUT') { 
     e.preventDefault(); 
    } 
}); 

Jeśli ktoś ma sugestie dotyczące dodatkowej treści lub jak ją sformatować, aby mogła dotrzeć do większej liczby odbiorców, która byłaby świetna. Nigdy nie widziałem zawartości, którą mam tutaj w jednym miejscu, więc czułem, że musi być na SO.

Answer 2

Połączyć dwa!

// prevent scrolling from outside of input field 
$(document).on('touchstart', function(e) { 
    if (e.target.nodeName !== 'INPUT') { 
     e.preventDefault(); 
    } 
}); 

// prevent scrolling from within input field 
$(document).on('touchmove', function(e) { 
    if (e.target.nodeName == 'INPUT') { 
     e.preventDefault(); 
    } 
}); 

To prawdopodobnie nie jest doskonały albo i jestem szczególnie zaniepokojony, że pierwsza funkcja uniemożliwi następujących linków, ale zostawiam to innym robić intensywne testy.

Answer 3

Prosta odpowiedź na pytanie brzmi: nie używaj "preventDefault" zamiast używać właściwości wskaźnik-zdarzeń css, aby wyłączyć przewijanie elementu przewijającego.

CSS dla wejść:

input { 
    pointer-events: auto !important; 
} 

touchstart wydarzenie słuchacz:

document.body.addEventListener('touchstart', function(e) { 
    if (e.target.nodeName === 'INPUT') { 
     this.style.pointerEvents = 'none'; 
    } 
}); 

Musisz zresetować wskaźnik-wydarzenia, kiedy plama wejście.

document.body.pointerEvents = 'auto'; 

+1 dobre pytanie