2012-02-10 7 views
26

Obecnie używam do monitorowania $ (okno) .scrollTop() i robić rzeczy, aby stworzyć efekt paralaksy.Jak mogę monitorować pozycję przewijania podczas przewijania w Safari na iOS?

We wszystkich przeglądarkach komputerowych funkcja foo() jest wywoływana dla każdego piksela użytkownika, który przewija, a wszystko jest ładne i eleganckie. W przeglądarce Safari na iOS zdarzenie przewijania jest uruchamiane tylko PO zakończeniu przewijania.

Dodałem $(window).bind('touchmove', foo);, aby upewnić się, że funkcja jest wywoływana podczas przesunięcia w iOS, i to mnie trochę dalej. Kiedy użytkownik puści palcem, strona będzie nadal przewijana, ale wydarzenie przestanie strzelać.

Wszelkie pomysły?

Odpowiedz

4

Kiedy zobaczyłem twoje pytanie, planowałem zrobić polyfill dla tego (jeśli taki nie istnieje?). Niestety miałem bardzo mało czasu.

Chodzi o to, aby mieć setInterval, który jest inicjowany ontouchstart, i sprawdza, czy document.body.scrollTop zmienił się od czasu ostatniego, np. na każde 20 milisekund. A jeśli tak, to ręcznie wysyłamy zdarzenie przewijania. W przeciwnym razie jesteśmy clearInterval, ponieważ najwyraźniej nie ma już więcej przewijanego wydarzenia.

To byłoby w skrócie. Jeśli masz więcej czasu (niż ja), to możesz spróbować z tymi wytycznymi.

Edytuj: Teraz, czytając dalej, ten sam pomysł wydaje się być sugerowany przy drugiej odpowiedzi. Czy jesteś pewien, że przerwy są zatrzymywane podczas przewijania na iPadzie?

+0

@tkalve samo w droid ... –

+7

Próbowałem t on sam na http://www.hakoniemi.net/labs/onscroll.html i skończył z tą samą rozdzielczością: nie można śledzić elastycznego przewijania w systemie iOS. Nie ma dla niego żadnego detektora zdarzeń + oba limity czasu/interwały nie są wykonywane podczas przewijania. A ponieważ nie ma requestAnimationFrame w iOS5, wydaje się niemożliwe do rozwiązania. – zvona

+0

Z pewnością nie oczekujesz, że rAF zostanie uruchomiony, jeśli interwał nie powiedzie się. Jest to jednak FWIW, możliwe jest uzyskanie aktualnego odczytu w narzędziach Safari Dev wyposażonych w gniazdo internetowe, podczas przewijania momentu. –

0

To może być błąd z samego jQuery: http://bugs.jquery.com/ticket/6446

że bilet został otwarty na chwilę, a odnosi się do iOS 4, ale być może warto zbadać obliczania pozycji przewijania z czystego javascript.

0

Jak wiem, nie ma wykonywania javascript podczas przewijania na większości urządzeń mobilnych. Istnieje kilka obejść (np. Iscroll). Iscroll używa techniki "transformacji" css. Ale nie ma sposobu, aby wykonać javascript podczas przewijania. Przypuszczam, że algorytm przewijania wygładzania jest zbyt drogi.

1

Choć nie jest to możliwe po wyjęciu z pudełka, by tak rzec, można to zrobić za pomocą iscroll

Tak, można użyć iScroll dla iOS i Android urządzeń mobilnych/tabletek i używać sposób obecnie robimy to na urządzenia stacjonarne.

iScroll ma kilka opcji dla funkcji wywołania zwrotnego nazywać pewnych wydarzeń - takich jak „onScrollMove”, „onBeforeScrollEnd”, „onTouchEnd”, itd. Niestety, nie ma opcji, aby wykonać zwrotnego na „każdej pozycji zmiany, w tym zmiany powodujące pęd przewijania po tym, jak użytkownik przestał dotykać ekranu ". Ale łatwo jest dodać jeden.

W źródle iScroll, wokół linii 127, w pobliżu "// Wydarzenia" komentarz, dodać nową zmienną:

onPosChange: null 

Następnie wokół linii 308, na końcu funkcji "_pos" dodaj linię:

if (this.options.onPosChange) this.options.onPosChange.call(); 

(czyli po prostu wywołać funkcję przekazany w opcji „onPosChange”, jeśli istnieje).

Uczyniwszy to, następujący przykładowy kod utworzy iScroll dla div z id = „iscroll_container” i drukuje Y przesunięcie do konsoli za każdym razem, gdy zmiany:

var myScroll; 
function loaded() { 
    myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll }); 
} 

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

//Use this for high compatibility (iDevice + Android) 
document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false); 

function actOnScroll(){ 
    console.log('got a scroll move! Vert offset is: ' + myScroll.y); 
} 

Uwaga, Ben the Bodyguard Parallax Site działa na iPadzie przy użyciu iScroll (używają znacznie starszej wersji iscroll i nie robią tego dokładnie tak, jak opisałem tutaj)

Również, Life of Pi Parallax Site działa na iPadzie naprawdę ładnie - nie mogę się domyślić, w jaki sposób rób to, ale przynajmniej udowadnia, że ​​to możliwe!

2

Strona Apple dla iPhone 5c używa efektów przewijania paralaksy, które wydają się kontynuować, gdy palec nadal dotyka ekranu i przewija. Domyślam się, że javascript nie może być całkowicie wyłączony podczas przewijania. Tumult Hype zapewnia również tę funkcjonalność.

4

Bardzo polecam korzystanie z biblioteki javascript "Skrollr". Jest to zdecydowanie najlepsza opcja animacji przewijania na telefonie komórkowym, którą udało mi się znaleźć na dzień dzisiejszy i bardzo szybko można ją szybko uruchomić. Twórz animacje i manipuluj CSS w oparciu o pozycję przewijania początkowego i końcowego. Twórz tyle pozycji przewijania danych i animacji, ile potrzebujesz dla większości standardowych właściwości CSS.

W przykładzie kolor tła, by animowanie ciągu zwoju 500 pikseli:

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div> 

kasie repozytorium na Git: https://github.com/Prinzhorn/skrollr

Skrollr Demo przykład: http://prinzhorn.github.io/skrollr/

udanych Przykład rzeczywistego świata: http://www.fontwalk.de/03/

+0

Dzięki za referencję. Mam do czynienia z tym samym problemem i nadzieja skrollr pomoże, ale przechodząc przez niesamowitą dokumentację jestem już z tym pewien. – Max