Impossibile interrompere lo scorrimento del div esterno quando la fine del div interno ha raggiunto

Caso di utilizzo: - Se l'utente sta scorrendo un div interno, non deve scorrere il div esterno una volta raggiunto il segmento div interno.Impossibile interrompere lo scorrimento del div esterno quando la fine del div interno ha raggiunto

Il seguente codice funziona perfettamente se il div interno ha già raggiunto la fine. l'evento touchstart/touchmove si attiva dopo che il div interno ha raggiunto la fine.

Ma nel caso in cui non alzi il tocco e continui a scorrere e se la fine del div interno ha raggiunto in questo processo, inizia a scorrere il div esterno.

$('body').find('.scrollableDiv').on(
    { 
     'touchstart' : function(e) { 
     touchStartEvent = e; 
     }, 
     'touchmove' : function(e) { 
     e.stopImmediatePropagation(); 
     $this = $(this); 
     if ((e.originalEvent.touches[0].pageY > touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop == 0) || 
      (e.originalEvent.touches[0].pageY < touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop + this.offsetHeight >= this.scrollHeight)){ 
      e.preventDefault(); 
     } 
     }, 
    });

Come si interrompe lo scorrimento non appena viene raggiunta la fine del div interno? Sto cercando di raggiungere questo obiettivo su un browser su dispositivo Android. Qualcuno può aiutarmi in questo senso?

NOTA: l'utente dovrebbe essere in grado di scorrere il div esterno.

Grazie in anticipo.

fonte

2013-08-21 Sashwat

Questa mi sembra una cattiva idea. Stai provando a scrivere codice che appartiene al browser web stesso, al fine di modificare l'interfaccia utente del browser mentre sul tuo sito in un modo che è incoerente con il modo in cui funziona su altri siti, disabilitando una funzione che l'utente potrebbe desiderare . –

Mi dispiace, se non ho chiarito il mio punto.In realtà sto cercando di dare una funzionalità in cui l'utente può scorrere entrambi i div in modo indipendente e lo scorrimento di un div interno non dovrebbe mai scorrere il div esterno. Considera una situazione in cui l'utente ha effettuato uno scorrimento veloce nel div interno che avrebbe provocato lo scorrimento della pagina non appena il div interno ha raggiunto la fine e quindi l'utente deve scorrere di nuovo la pagina verso l'alto per portare il div interno nel visibile vista. Non è una brutta UX? – Sashwat

Mozilla sembra essere d'accordo con te, dato che Firefox non lo fa su nessuna piattaforma, né sul desktop (con la ruota) né sul cellulare (con il dito). Apple sembra non essere d'accordo con te. Penso che probabilmente è dove la decisione appartiene, e il tentativo di farlo funzionare in modo diverso su diversi siti è di per sé una cattiva UX. Lo scorrimento –

Se si utilizza JQuery, utilizzerei qualcosa che utilizza scrollTop() per verificare se l'utente ha raggiunto la parte inferiore del div scorrevole e, in tal caso, attivare un evento che annulla ulteriormente lo scorrimento? O qualcosa che potresti voler fare.

Qualcosa sulla falsariga di:

$(document).ready(function(){ 
    $('.scrollableDiv').bind('scroll',scroll_check); 
}); 

function scroll_check(e){ 
    var elem = $(e.currentTarget); 
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()){ 
     // set overflow-y hidden? 
    } 
}

fonte

2013-08-27 22:18:20

viene chiamato in pratica dopo che l'oggetto/div è già stato spostato. Ecco un articolo di riferimento. http://tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/ – Sashwat

ho paura che non ho tempo di scrivere il codice esplicito per risolvere questo, ma ho una soluzione concettuale per voi che ancora potrebbe aiutare tu.

Su DOM ready, avvolgere ogni overflow: elemento di scorrimento con un wrapper con position: relative.
All'avvio tocco, per ogni antenato con overflow: scroll, impostare overflow: visible, position: absolute, ottenere altezza calcolata & larghezza e applicare questi come stili inline, e set top per essere il negativo di scrollTop - e impostare l'involucro overflow-hidden: questo mezzo sarà nella stessa posizione in cui si trovava, ma non è stato in grado di muoversi attraverso lo scorrimento.
Sulla fine tocco, rimuovere gli stili applicati al punto 2.

posso già vedere avvertimenti:

Se si sta utilizzando il posizionamento relativo o assoluto per il layout all'interno overflow: scroll elementi (e non hanno posizionamento relativo o assoluto loro stessi), questo si confonderà con il tuo layout.
Se alcuni elementi di scorrimento sono avvolti dopo DOM pronto, sarà necessario applicare un wrapper per ciascuno.

... ma è sicuramente fattibile ...

fonte

2013-09-02 16:56:31 Barney

Impossibile interrompere lo scorrimento del div esterno quando la fine del div interno ha raggiunto

risposta

Problemi correlati