niedziela, 14 czerwca 2015

Efekt skaczącej zawartości okna w Safari na iPad

Jako, że Safari na iPad posiada własne efekty animacyjne, między innymi takie jak skaczące okno podczas przesuwania palcem w prawo/lewo (tzw. bouncing effect), to staje się to irytujące kiedy na stronie mamy slajder, w którym możemy przesuwać zdjęcia właśnie palcem.

Efekt jest taki, że wraz z przesunięciem jednego zdjęcia w slajderze, cała zawartość strony, także jest przesuwana, by następnie wróciła na swoje miejsce.

Jak zapobiec takim efektom? W jQuery mamy zdarzenie takie jak touchmove, w którym możemy wykorzystać przerwanie takiego działania poprzez preventDefault();

Przykład nr 1:
$(document).on('touchmove', function(event) {
 event.preventDefault();
});

Powyższy kod nie wymaga szczegółowego opisu, jest dość prosty.

Ale jak teraz zezwolić na używanie przewijania np. zdjęć palcem? Musimy dodać warunek kiedy ma działać a kiedy nie:

Przykład nr 2:
$(document).on('touchmove', function(event) {
 if ($(event.target).closest('.slider').length == 0) {
  event.preventDefault();
 }
});
Przydatne rozwiązanie:)

Brak komentarzy:

Prześlij komentarz