Posizione di scorrimento corrente quando si usa -webkit-overflow-scrolling: touch - Safari javascript evento (scrollTop/scrollLeft)

Sto usando -webkit-overflow-scrolling: toccare per creare un div con overflow: scroll; scorrere senza problemi attraverso gli eventi touch di iOS.Posizione di scorrimento corrente quando si usa -webkit-overflow-scrolling: touch - Safari javascript evento (scrollTop/scrollLeft)

Funziona brillantemente, tranne che non sembra aggiornare element.scrollTop o element.scrollLeft mentre scorre. Aggiorna solo element.scrollTop/innesca un evento di scorrimento quando la quantità di moto si esaurisce e si ferma.

Qualcuno sa di un modo per scoprire la sua attuale posizione di scorrimento e se c'è un evento che posso ascoltare? Mi sono chiesto se può essere trovato attraverso una proprietà CSS3, forse? Grazie

Esempio basso con due tentativi:

<!DOCTYPE html> 
<body> 
    <div id="display_a">Scroll is: 0</div> 
    <div id="display_b">Scroll is: 0</div> 
    <div id="element" style="width:800px;overflow-x:scroll;-webkit-overflow-scrolling:touch;"> 
     <div style="font-size:100px;width:1850px;"> 
      a b c d e f g h i j k l m n o p q r s t u v w x y z 
     </div> 
    </div> 
    <script> 
     var e = document.getElementById("element"); 
     var display_a = document.getElementById("display_a"); 
     var display_b = document.getElementById("display_b"); 
     e.addEventListener("scroll",function(event){display_a.innerHTML = "Scroll is: " + event.target.scrollLeft;}); 
     setInterval(function(){display_b.innerHTML = "Scroll is: " + e.scrollLeft;},100); 
    </script> 
</body> 
</html>

============ UPDATE ============

IOS 8 ha ordinato questo comportamento. Gli eventi di scorrimento ora vengono attivati durante lo scorrimento.

Nota che ora dovrai gestire i valori di scorrimento negativi durante lo scorrimento di rimbalzo.

fonte

2011-12-17 Jamie G

Volevo solo dire un grande ringraziamento a tutti coloro che hanno contribuito finora, temo che non troveremo una soluzione perfetta ma ci sono alcuni buoni suggerimenti di seguito. –

Il problema esiste ancora sui browser di terze parti su iOS> 8.x – Thomas

Gli eventi di scorrimento non vengono attivati nelle app Web di casa o UIWebView – MachineElf

Nella Developer Library iOS, c'è una spiegazione nelle linee guida di Safari su di esso:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

In sostanza, il flusso di eventi per lo scorrimento va in questo modo: tocco/start trascinamento (evento rotellina del mouse) -> pan/movimento (nessun evento) -> stop (onscroll)

Quindi non vi è nulla di simile a un evento continuo di scorrimento che viene attivato mentre il pan si verifica lì solo un onScroll alla fine del gesto.

Se si trova un modo opzionale per realizzare questo, fatemelo sapere :)

fonte

2011-12-22 17:18:12 pixshatterer

Temo di non essere ancora più vicino a questo, ma certamente farò sapere a tutti se e quando trovo una soluzione. Ringrazia tutti. –

Questo potrebbe aiutare. È una soluzione jQuery che sto usando per forzare l'impaginazione sui flussi laterali IOS. Non è esattamente lo stesso caso in cui lavori. Sto usando "overflow-scrolling: auto" che non si comporta come la versione "touch".

#yourDiv { 
    -webkit-overflow-scrolling: auto; 
    overflow:auto; 
}

Io uso "overflow-scrolling: auto" perché reagisce più rapidamente all'evento di tocco. Unfortunatley, "overflow-scrolling: touch" sembra infatti resistere alle animazioni javascript e CSS mentre è in movimento. Ma almeno puoi ricavarne alcune informazioni sulla posizione durante la pergamena.

var pageSwiping = false; 

$('#yourDiv').on('scroll', function(e) { 
    if (pageSwiping !== true ) { 
     pageSwiping = true; 
     var offset = $('#'+e.target.id).scrollLeft(); 
     $('#yourDiv').one('touchend',{elem:e.target.id,dragStart:offset},divMove); 
    }; 
}); 

var divMove = function(e) { 
    pageSwiping = false; 
    var elem = e.data.elem; 
    var dragEnd = $('#'+elem).scrollLeft(); 
    var dragDelta = (dragEnd - e.data.dragStart) 
     // Make page-alignment decisions based on dragDelta 
};

fonte

2012-01-09 14:14:12 mattsahr

Ciao Matt, ho appena ricevuto questa risposta. È una possibile soluzione, ma adoro la sensazione dello scroll nativo di iOS, quindi cerco davvero di mantenerlo (senza tentare di replicare il codice di rallentamento che l'iOS fa così bene). Grazie comunque! –

-1

Se aiuta, scrollTop e scrollLeft sono aggiornati in tempo reale all'interno del gestore di eventi touchmove:

$(function() 
{ 
    var $div = $("#scroll") 
    var $p = $("#display"); 

    var update = function(e) 
    { 
     $p.text(e.type +": "+ $div.scrollLeft() +", "+ $div.scrollTop()); 
    } 

    $div.bind("touchmove", update) 
     .bind("scroll", update); 
});

fonte

2012-04-09 01:44:11

Giusto per notare, se si desidera mantenere gli elementi statici sullo schermo, posizione: fisso CSS è stato introdotto con iOS 5. –

Ciò presuppone una dipendenza jQuery – donohoe

JQuery è stato utilizzato per una breve dimostrazione di lavoro; scrollTop, scrollLeft e touchmove sono standard senza di esso. –

In una situazione simile che sto usando scrollability.js, che fa davvero un bel lavoro simulando la comportamento di scorrimento nativo. Sto quindi ascoltando l'evento "scrollability-start" e monitorando gli attributi top/left dell'elemento a scorrimento. So che non è l'ideale, ma è un'alternativa decente.

fonte

2012-04-23 20:33:15 spacehelmetboy

Devo dire che in realtà fa un buon lavoro simulando lo scrolling in stile iOS! Sicuramente darò un'occhiata corretta ad un certo punto. Grazie per il suggerimento –

anche dare un'occhiata a [iScroll] (http://cubiq.org/iscroll-4), che fa la stessa cosa, ma ho trovato più utile a causa di metodi come scrollTo() e scrollToElement(). – spacehelmetboy

quello che so è strano, ma si può tenere traccia di scrollLeft/scrollTop semplicemente registrandosi TouchStart evento:

e.addEventListener("touchstart",function(event){});

fonte

2013-02-19 09:38:38 David

Grazie David, ma sicuramente questo non aiuta dopo aver preso il dito del touch screen ed è solo lo slancio che continua a scorrere. O mi sta sfuggendo qualcosa? –

Hai ragione, sto affrontando lo stesso problema in questo momento. – David

ottenere la posizione di uno scroller orizzontale mentre Aramus (tramite CSS di overflow-y: scroll)

$('#myNode').bind('scroll', function(e){ 
    var myPos = e.target.scrollLeft; 
    // do something with myPos but don't naughty 
})

fonte

2013-03-13 15:03:14 flunder

Ciò presuppone una dipendenza jQuery – donohoe

Ecco il mio archivio in cui ho aggiunto il callback onScrolling() di farmi sapere quando l'animazione scorrimento slancio si sta verificando in animate(): https://github.com/simpleshadow/iscroll/blob/master/src/iscroll.js

Ho fatto un app esempio usando il suo suggerimento qui: http://jsfiddle.net/simpleshadow/wQQEM/22/

@ robertlawson86 su Github fatto questo suggerimento per contribuire a fornire un'idea su quando per afferrare la posizione durante lo scorrimento di moto. Vedi esempio e discussione: https://github.com/cubiq/iscroll/issues/183

fonte

2013-04-02 08:08:02 Corey

Posizione di scorrimento corrente quando si usa -webkit-overflow-scrolling: touch - Safari javascript evento (scrollTop/scrollLeft)

risposta

Problemi correlati