2012-02-10 9 views
26

Attualmente utilizzo $(window).bind('scroll', foo); per monitorare $ (window) .scrollTop() e faccio cose per creare un effetto di parallasse.Come posso monitorare la posizione di scorrimento durante lo scorrimento in Safari su iOS?

In tutti i browser desktop viene chiamato foo() per ogni pixel l'utente scorre, e tutto è bello e dandy. In Safari su iOS, l'evento di scorrimento viene attivato solo dopo che lo scorrimento è terminato.

Ho aggiunto $(window).bind('touchmove', foo); per assicurarsi che la funzione venga chiamata durante lo scorrimento in iOS, e mi ha fatto un po 'più lontano. Quando l'utente rilascia il dito, la pagina continua a scorrere, ma l'evento si interrompe.

Qualche idea?

risposta

4

Quando ho visto la tua domanda, stavo progettando di fare un polyfill per questo (se tale non esiste?). Purtroppo ho avuto pochissimo tempo.

L'idea è di avere un setInterval, che viene avviato ontouchstart, e controlla se document.body.scrollTop è cambiato dall'ultima volta, ad es. ogni 20 millisecondi. E se lo è, quindi inviamo manualmente l'evento di scorrimento. Altrimenti abbiamo clearInterval dato che a quanto pare non si verificano più eventi di scorrimento.

Questo sarebbe in breve. Se hai più tempo (di me), sentiti libero di provare con queste linee guida.

Modifica: Ora, leggendo ulteriormente, la stessa idea sembra essere suggerita sull'altra risposta. Sei sicuro che gli intervalli vengono interrotti mentre scorri su iPad?

+0

@tkalve stesso su droide ... –

+7

Ho provato t lui stesso a http://www.hakoniemi.net/labs/onscroll.html e finì con la stessa risoluzione: iOS scroll non può essere tracciato. Non esiste un listener di eventi per questo + entrambi i timeout/intervallo non vengono eseguiti durante lo scorrimento. E poiché non c'è richiestaAnimationFrame in iOS5, questo sembra impossibile da risolvere. – zvona

+0

Sicuramente non ci si aspetta che rAF venga eseguito se l'intervallo non riesce a funzionare. È, tuttavia, FWIW, possibile ottenere una lettura aggiornata nei Safari Dev Tools alimentati da socket Web mentre è in corso lo scorrimento del momentum. –

0

Questo potrebbe essere un bug con jQuery stessa: http://bugs.jquery.com/ticket/6446

Quel biglietto è stato aperto per un po 'e si riferisce a iOS 4, ma forse si dovrebbe indagare il calcolo della posizione di scorrimento con puro javascript.

0

Come noto, non è prevista l'esecuzione di JavaScript durante lo scorrimento sui dispositivi più mobili. Esistono alcune soluzioni alternative (ad esempio iscroll). Iscroll sta usando css-technique "transform". Ma non c'è modo di eseguire javascript durante lo scorrimento. Suppongo che l'algoritmo di scrolling sia troppo costoso.

1

Anche se questo non è possibile, fuori dalla scatola, per così dire, è possibile farlo utilizzando iscroll

Quindi, utilizza iScroll per iOS e Android dispositivi mobili/tablet, e utilizzare il modo in cui si lo stiamo attualmente facendo per i dispositivi desktop.

iScroll ha un sacco di opzioni per le funzioni di callback da chiamare su determinati eventi, come "onScrollMove", "onBeforeScrollEnd", "onTouchEnd", ecc. Sfortunatamente, non c'è un'opzione per eseguire una richiamata su "OGNI posizione" modifica, comprese le modifiche causate dal momento dello scorrimento dopo che l'utente ha smesso di toccare lo schermo ". Ma è abbastanza facile aggiungerne uno.

Nella fonte iScroll, intorno alla linea 127, nei pressi del commento "// Events", aggiungere una nuova variabile:

onPosChange: null 

Poi, intorno alla linea 308, al termine della funzione "_pos", aggiungere questa riga:

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

(che sarà solo chiamare la funzione passata l'opzione "onPosChange", se esiste).

Fatto questo, il seguente codice di esempio sarà istituito iScroll per il div con id = "iscroll_container", e stamperà la Y-offset alla console ogni volta che cambia:

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); 
} 

nota, Ben the Bodyguard Parallax Site opere su iPad utilizzando iScroll (usano una versione molto più vecchia di iscroll e non farlo esattamente come ho descritto qui)

Inoltre, Life of Pi Parallax Site opere su iPad davvero bene - non riesco a capire come fallo, ma almeno dimostra che è possibile!

2

La pagina Web di Apple per iPhone 5c utilizza alcuni effetti di scorrimento parallasse che sembrano continuare con il dito che tocca ancora lo schermo e lo scorrimento. Quindi credo che javascript non possa essere completamente disabilitato durante lo scroll. Tumult Hype fornisce anche questa funzionalità.

4

Consiglio vivamente di utilizzare la libreria javascript "Skrollr". È di gran lunga la migliore opzione di animazione di scorrimento mobile che ho trovato fino ad oggi ed è molto facile da installare e funzionare rapidamente. Crea animazioni e manipola i CSS in base a una posizione di scorrimento iniziale e finale. Crea tante posizioni di scorrimento dei dati e animazioni di cui hai bisogno per la maggior parte delle proprietà CSS standard.

Nel seguente esempio il colore di sfondo si animano nel corso di un rotolo di 500 pixel:

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

Checkout il repository su Git: https://github.com/Prinzhorn/skrollr

Skrollr Demo Esempio: http://prinzhorn.github.io/skrollr/

Impressionante esempio del mondo reale: http://www.fontwalk.de/03/

+0

Grazie per il riferimento. Ho a che fare con lo stesso problema e spero che skrollr ti aiuti, ma attraverso la documentazione fantastica sono già sicuro di ciò. – Max