scrollTop funktioniert nicht in Android Handys

Question

Ich entwickle Chat-Funktionalität für Andriod Mobile App, für diese bin mit jQuery und jQuery Mobile Theme-Frontend.

Mein Problem ist zu versuchen, scrollTop() -Funktion zu verwenden, um neue Nachrichten an der Unterseite anzuhängen. scrollTop() Funktion funktioniert in allen Browsern gut, aber in Andriod funktioniert es nicht .. irgendjemand hat eine Idee diesbezüglich. Hier ist der HTML-Code:

<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> 

ist hier jQuery-Code für 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: Ich habe festgestellt, dass, wenn Sie "top" Stil zu, sagen wir, -120 es sollte die Div durch diese 120px "scrollen".

Hier ein HTML-Beispiel (sorry für alle Inline-Styles):

<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> 

Und der Javascript Teil:

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

ich diese Versionen auf 3.0 und 4.0 getestet von Android (Ich muss sagen, es war auf dem Emulator gedacht).

Hoffe, das hilft!

ORIGINAL MESSAGE:

Scroll oben scheint nicht in einigen Versionen von Android, wie berichtet here, und es gibt keine definitive Antwort von Google darüber zu arbeiten (sieht aus wie in erster Linie 3,0 und 4,0 hat dieses Problem, 2.3 und unten oder 4.1 scheint nicht betroffen zu sein).

Tut mir leid, aber es scheint, als ob es momentan keine Lösung für diesen Fehler gibt.

Answer 2

Entschuldigung, ich habe keine Antwort und habe nicht die Reputationsstufe, die notwendig ist, um einen Kommentar zu hinterlassen, also muss ich dies als "Antwort" posten. Ich habe eine lange Zeit damit verbracht, daran zu arbeiten, einen Workaround zu finden, den ich nicht gefunden habe. Ich habe eine Testseite erstellt, die einen Einblick gibt, was passiert.

http://jsfiddle.net/RyLek/embedded/result/ < - DIV Auto zum Überlauf http://jsfiddle.net/RyLek/2/embedded/result/ < - DIV Satz zum Überlaufen bewegen

Das Problem ist die .scrollTop Eigenschaft nicht in einem DIV auf die aktuelle Position wird aktualisiert, wenn Sie nach unten scrollen. Wenn Sie die scrollTop-Eigenschaft festlegen, wird die DIV-Bildlaufposition nicht aktualisiert.

Als Antwort auf den Kommentar "Aitor Calderon" auf die obige Antwort gemacht. Ich habe versucht, die Überlauf-Eigenschaft zu scrollen (siehe oben Beispiel) und das hat keine Auswirkungen.

Ich habe auch ein paar Drittanbieter-Browser auf dem Markt wie Maxthon und Dolphin versucht, die auch dieses Problem haben. Wenn Sie ein Android 4.0 ICS-Gerät betreiben, können Sie den Google Chrome-Browser aus dem Google Play Store herunterladen, in dem die scrollTop-Eigenschaft funktioniert. Dies ist für mich keine Option, da unser Unternehmen meist Wabengeräte besitzt, die diesen Browser nicht unterstützen.

Hier ist eine Frage, die ich über diese letzte Woche zu diesem Thema geschrieben: jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives? Die Antwort war zu versuchen, dies in CSS zu implementieren, die ich nicht erfolgreich durchgeführt habe.

Answer 3

Es scheint, dass dieses Problem nur auftritt, wenn die Überlaufeigenschaft auf 'scroll' eingestellt ist (was die einzige Zeit ist, die wir uns darum kümmern würden). Ein Workaround, der für mich funktionierte, bestand darin, zuerst den Überlauf auf 'versteckt' zu setzen, den scrollTop zu setzen und dann den Überlauf auf 'scroll' zurückzusetzen.

Answer 4

Ich musste vom oberen Rand der Seite zu einem bestimmten Element scrollen, und .offset war die Lösung für mich für Android & iOS. .scrolltop funktionierte nur in iOS.

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

Answer 5

Ich verwende Folgendes für Android-Unterstützung, wenn Sie scrollTop() verwenden. Hat in meiner Erfahrung als universelle Lösung ziemlich gut funktioniert.

Die CSS:

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

Die JS:

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

Answer 6

Eine Abhilfe für mich war:

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

Sie können mit einem bestimmten ID zu dem Element springen.

Ich weiß, das ist nicht die Lösung für alle, kaufen vielleicht kann ich jemandem helfen.