Sfarfallio dell'iPad con scorrimento automatico utilizzando il plug-in JQuery e Scrollto

Question

Ho un problema un po 'strano con la piattaforma iOS per una pagina che sto sviluppando. This è la pagina in questione. Quando si fa clic su una qualsiasi delle immagini dello studio del caso, la pagina prima visualizza lo studio del caso richiesto, quindi scorre fino ad esso.

Questo funziona su tutti i browser desktop su Windows e Mac, ma su iPhone e iPad si ottiene uno sfarfallio orribile mentre scorre verso il basso.

Non sei sicuro di come eseguire il debug o correggere questo problema.

Qualsiasi idea sarebbe di grande aiuto!

Grazie in anticipo, Shadi

UPDATE 1

L'ultima pagina può essere trovato here. Non ho ancora trovato una soluzione - se qualcuno ha qualche idea sarebbe fantastico!

Answer 1

È necessario aggiungere e.preventDefault(); a ciascuna chiamata .click(). Ciò impedisce l'azione predefinita del browser, che deve rimanere nello stesso posto. Spero che questo ti aiuti!
cioè

$("#quicksand li, .client-list li").click(function (e) { 
    e.preventDefault(); 
    ... 
}); 

Answer 2

Non sono sicuro se questo vale per le animazioni jQuery. Ma quanto segue sembra influenzare le animazioni CSS.

http://css-infos.net/property/-webkit-backface-visibility

sintassi

-webkit-backface-visibility: visibility; 

Parametri

visibilità Determina se la faccia posteriore di un elemento trasformata è visibile. Il valore predefinito è visibile.

modificare

provare ad applicare ad ogni elemento e vedere cosa succede.

*{ 
-webkit-backface-visibility: visible; 
} 

e cercare

*{ 
-webkit-backface-visibility: hidden; 
} 

E 'solo una supposizione davvero ...

Answer 3

Hai provato questo:

$('a[href=#target]'). 
    click(function(){ 
     var target = $('a[name=target]'); 
     if (target.length) 
     { 
      var top = target.offset().top; 
      $('html,body').animate({scrollTop: top}, 1000); 
      return false; 
     } 
    }); 

Answer 4

ho anche confermare il metodo di Tund Do funziona perfettamente. Se avete bisogno di una variante "destra/sinistra" della stessa cosa (come ho fatto io) qui è:

$('.pg6').click(function(){ 
    var target = $('#page6'); 
    if (target.length) 
    { 
     var left = target.offset().left; 
     $('html,body').animate({scrollLeft: left}, 1000); 
     return false; 
    } 
}); 

direi si potrebbe combinare le due cose, prendere la prima posizione e la catena delle Animates per una " sinistra/destra/su/giù "anche l'animazione.

Answer 5

Ho lo stesso sfarfallio su iPhone - anche con preventDefault e restituisco false opzioni di annullamento dell'evento di clic predefinito.Sembra che sul dispositivo tenti di tornare all'inizio della pagina prima di scorrere. Se hai sia un'animazione scrollTop che un'animazione ScrollLeop su di essa diventa davvero buggy. È un problema di jQuery. Ho visto un metodo di scorrimento con mootools che non presenta questo problema. Vedi questa pagina: http://melissahie.com/

Answer 6

Ho avuto lo stesso problema.

Il problema è il plugin ScrollTo. Invece di usare scrollto.js basta usare .animate con scrollTop. Non più sfarfallio in ipad/iphone.

Qui è senza sfarfallio http://www.sneakermatic.com

Answer 7

Se stai solo scorrendo la pagina in verticale è possibile sostituire l'intero plugin per jQuery scrollTo con questa semplice riga:

$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic'); 

Personalmente mi fare qualcosa di simile

$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){ 
    //do stuff 
}); 

ho scoperto che se provo a fare il lavoro altro js mentre è lo scorrimento rende la crisi del browser e l'animazione non è smoot h. Ma se usi la funzione di callback, prima scorrerà, quindi farà ciò di cui hai bisogno.

Ho messo un -15 alla fine di .top perché volevo mostrare il bordo superiore del div che stavo scorrendo, semplicemente per scopi estetici. 1000 è la durata in millisecondi dell'animazione.

Il credito va al poster, animato, per la mancia.

Answer 8

Se è necessario solo lo scorrimento verticale, è possibile utilizzare {'axis':'y'} come impostazioni per scorrere il metodo.

$.scrollTo(*selector*, *time*, {'axis':'y'}); 

Answer 9

Grazie nicole per dare l'esempio con mootools. Sembra davvero un problema di jQuery quando si prova a fare un'animazione su BOTH scrollTop e scrollLeft.

con MooTools:

var scroll = new Fx.Scroll(window, {duration: 1000, wait: false, transition: Fx.Transitions.quadInOut}); 
scroll.start(y, x); 

funziona senza problemi su iOS5!

Answer 10

Definizione di '' asse ':' y '} ha risolto correttamente! Mi ha aiutato con slideUp/Down flickering.

Answer 11

È necessario includere {axis: 'y'} nell'oggetto opzioni. Assicurarsi inoltre di non aver abilitato l'opzione di interruzione. Puoi testarlo con {interrupt: false}.