-webkit-overflow-scrolling: toccare e 'toccare la barra di stato per scorrere verso l'alto'

Question

Navigate to this fiddle su un iPhone e notare che anche se esiste una dichiarazione -webkit-overflow-scrolling:touch, la funzionalità 'tocca verso l'alto' funziona ancora. Questo è stato testato su un iPhone 4 con iOS 6.1 e un iPhone 4S con iOS 5.0.1.

Questo test solleva la questione: fa dichiarando -webkit-overflow-scrolling:touch influisce sulla 'barra di stato rubinetto per scorrere verso l'alto' comportamento in iOS?

Answer 1

Se si mette -webkit-overflow-scrolling:touch su qualsiasi elemento diverso da quello document.body, si romperà la barra di stato rubinetto di default per scorrere verso l'alto comportamento.

C'è un piccolo script su GitHub, che funziona come replacement for the missing scroll to top of iOS overflow scrolling. Puoi inserirlo nell'intestazione delle tue app per ottenere quasi lo stesso risultato.

Answer 2

Dalla mia esperienza, in effetti lo influenza. Non conosco un modo per far funzionare entrambe le funzioni contemporaneamente, almeno a partire da iOS 6.1.

Ho anche una citazione dal jQuery Mobile docs che esegue questo in su:

Il -webkit-trabocco a scorrimento: proprietà tocco sembra disabilitare gli eventi per scorrere fino alla cima della pagina quando il tempo è TAPpato nella barra di stato. Speriamo che Apple risolva questo problema perché è una funzionalità molto utile.

È davvero una sfortuna che Apple abbia configurato così, come anch'io mi piacerebbe usare questa funzione, ma l'abilità di scorrimento verso l'alto è più importante per me.

Answer 3

Il tuo violino non interrompe il comportamento "tocca barra di stato per scorrere verso l'alto", perché hai applicato -webkit-overflow-scrolling: touch; all'elemento body. Se lo si applica a qualsiasi elemento all'interno di body, il comportamento si interrompe.

Answer 4

C'è un modo per aggirare questo - http://www.artspot.eu/blog/2010/12/29/extending-iscroll-scroll-to-the-top-by-tapping-the-status-bar/

Matteo Spinelli, il creatore di iScroll, rivela in un tweet che è realtà non difficile a tutti per raggiungere questo obiettivo. Quando si tocca la barra di stato, viene attivato l'evento di scorrimento sull'oggetto della finestra. Utilizzando un evento listener, è possibile chiamare facilmente la funzione scrollTo per scorrere fino a la parte superiore dell'elenco.

window.addEventListener('scroll', function(){ 
    yourscrollobject.scrollTo(0,0,duration); 
}, false); 

Answer 5

Come la maggior parte delle risposte qui hanno notato, mettendo -webkit-overflow-scrolling: touch su qualsiasi elemento diverso da document.body causa problemi. Se stai usando un colpo di testa fissa e non si desidera aggiungere eventuali dipendenze, questo dovrebbe fare il trucco per chi utilizza JQuery:

$('.fixed-header').on('click',function(e){ 
    var $scrollingElement = $('.scrolling-element'); 

    $scrollingElement.css('overflow','hidden'); 
    $scrollingElement.animate({ scrollTop: 0 }, "fast", function() { 
     $scrollingElement.css('overflow','auto'); 
    }); 
}); 

Lo scopo della commutazione della proprietà overflow è per i dispositivi che utilizzano lo slancio scorrimento. Questo interrompe immediatamente ogni momento e fa l'animazione di scorrimento. Ho reso l'elemento di scorrimento una variabile solo per non interrogare inutilmente il DOM più volte. Spero che questo aiuti qualcuno in fondo alla strada. Se preferisci non farti mancare nulla, il progetto github @patrick collegato sembra un'altra grande soluzione.