scrollTop non funziona sui cellulari Android

Question

Sto sviluppando la funzionalità di chat per l'app mobile Andriod, perché sto utilizzando frontend per tema jQuery e jQuery mobile.

Il mio problema sta tentando di utilizzare la funzione scrollTop() per aggiungere nuovi messaggi in fondo. La funzione scrollTop() funziona bene in tutti i browser, ma in Andriod non funziona ... qualcuno ha qualche idea in merito. ecco il codice HTML:

<div data-role="page" id="chatPage"> 
    <div data-role="content"> 
     <div id="incomingMessages" style="height: 180px;overflow: auto;"> 
     </div> 
     <label for="messageText"><strong>Message:</strong></label> 
     <table width="100%"> 
      <tr> 
       <td width="75%"> 
        <textarea name="messageText" id="messageText"></textarea> 
       </td> 
       <td width="25%"> 
        <div id="sendButtonId" style="display:block"> 
         <a data-role="button" id="chatSendButton" name="chatSendButton" value="Send" make_button_disabled="enable"> 
          Send 
         </a> 
        </div> 
       </td> 
      </tr> 
     </table> 
     <table> 
      <tr> 
       <td> 
        <div id="endChatButton"> 
         <a data-role="button" id="chatCloseButton" name="chatCloseButton" value="EndChat" make_button_disabled="enable"> 
          End Chat 
         </a> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Ecco codice jQuery per scrollbuttom:

$("#chatSendButton").click(function() { 
    var mes = $("#messageText").val(); 
    $("#incomingMessages").append("<div class='message'><span class='username'>" +'Admin'+ ":" +"</span> "+ mes + "</div>"); 
    $("#incomingMessages").scrollTop($("#incomingMessages")[0].scrollHeight); 
}); 

Answer 1

EDIT: Ho scoperto che se si imposta lo stile "top", per esempio, -120 dovrebbe "scorrere" il div down di quei 120 px.

Ecco un esempio HTML (mi dispiace per tutti i stili inline):

<div id="container" style="position:relative; display:block; overflow:scroll; height:100px; border:1px solid;"> 
    <div style="position: relative; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(0, 0, 0))); height: 300px; width: 100%; background-position: initial initial; background-repeat: initial initial;" id="frm"> 
     <p>Message 1</p> 
     <p>Message 2</p> 
     <p>Message 3</p> 
     <p>Message 4</p> 
     <p style="color:#fff">Message you want to see right now</p> 
     <p>Message 5</p> 
     <p>Message 6</p> 
     <p>Message 7</p> 
     <p>Message 8</p> 
</div> 

E la parte Javascript:

<script type="text/javascript"> 
function init() 
{ 
    document.getElementById("setScroll").addEventListener('click',function() 
    { 
     document.getElementById("frm").style.top = -120;//Scroll by 120px 
    }); 
} 
</script> 

Ho testato questo su 3.0 e 4.0 versioni di Android (devo dire che era sull'emulatore pensato).

Spero che questo aiuti!

Messaggio originale:

scorrimento superiore sembra non funzionare in alcune versioni di Android come riportato here, e non c'è nessuna risposta definitiva da parte di Google su questo (sembra principalmente 3.0 e 4.0 hanno questo problema, 2.3 e muggito o 4.1 non sembra essere interessato).

Siamo spiacenti, ma sembra che al momento non ci siano soluzioni per questo bug.

Answer 2

Spiacente, non ho una risposta e non ho ancora il livello di reputazione necessario per lasciare un commento, quindi devo postarlo come una "risposta". Ho passato molto tempo a lavorare su questo tentativo di trovare una soluzione alternativa che non l'ho trovata. Ho creato una pagina di test che fornisce alcune informazioni su cosa sta succedendo.

http://jsfiddle.net/RyLek/embedded/result/ < - DIV impostato traboccare auto http://jsfiddle.net/RyLek/2/embedded/result/ < - DIV insieme a traboccare scorrere

Il problema è la proprietà .scrollTop non viene aggiornato alla posizione corrente in un DIV quando si scorre verso il basso. Inoltre, quando si imposta la proprietà scrollTop, in realtà non aggiorna la posizione di scorrimento DIV.

In risposta al commento "Aitor Calderon" fatto sulla risposta di cui sopra. Ho provato a impostare la proprietà di overflow per scorrere (vedi esempio sopra) e questo non ha alcun effetto.

Ho anche provato alcuni browser di terze parti sul mercato come Maxthon e Dolphin che hanno anche questo problema. Se stai utilizzando un dispositivo ICS Android 4.0, puoi scaricare il browser Google Chrome dal Google Play Store su cui opera la proprietà scrollTop. Questa non è un'opzione per me in quanto la nostra azienda utilizza principalmente dispositivi a nido d'ape che non supportano questo browser.

Ecco una domanda che ho postato su questa settimana scorsa su questo numero: jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives? La risposta è stata provare e implementare questo in CSS che non ho avuto successo nel realizzare.

Answer 3

Sembra che questo problema si verifichi solo quando la proprietà di overflow è impostata su "scroll" (che è l'unica volta che ci interessa). Un trucco che ha funzionato per me è stato innanzitutto impostare l'overflow su "hidden", impostare scrollTop, quindi impostare l'overflow su "scroll".

Answer 4

Avevo bisogno di scorrere dalla parte superiore della pagina a un elemento specifico e .offset era la soluzione per me per Android & iOS. .scrolltop ha funzionato solo su iOS.

$('html, body').animate({scrollTop: $('#element').offset().top + 20}, 10); 

Answer 5

Per l'utilizzo di scrollTop() uso il seguente supporto per Android. Ha funzionato abbastanza bene come soluzione universale nella mia esperienza.

Il CSS:

.androidFix { 
    overflow:hidden !important; 
    overflow-y:hidden !important; 
    overflow-x:hidden !important; 
} 

Il JS:

$(yourSelector).addClass("androidFix").scrollTop(0).removeClass("androidFix"); 

Answer 6

Una soluzione per me è stato:

window.location.hash = '#element' + currentItem; 

È possibile passare all'elemento con uno specifico ID.

So che non è la soluzione per tutti, compra forse posso aiutare qualcuno.