scrollTop no funciona en dispositivos móviles Android

Question

Estoy desarrollando la funcionalidad de chat para la aplicación móvil Andriod, para esto estoy usando la interfaz de tema móvil jQuery y jQuery.

Mi problema es tratar de usar la función scrollTop() para agregar nuevos mensajes en la parte inferior. La función scrollTop() funciona bien en todos los navegadores pero en Andriod no funciona ... cualquiera tiene alguna idea al respecto. Aquí está el código 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> 

Aquí es el código jQuery para 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: He descubierto que si se establece el estilo "superior" a, por ejemplo, -120 debería "desplazar" el div por esos 120px.

Aquí un ejemplo de HTML (lo siento por todos los estilos en línea):

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

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

He probado esto en 3.0 y 4.0 versiones de Android (debo decir que estaba en el emulador pensado).

Espero que esto ayude!

MENSAJE ORIGINAL:

parte superior de desplazamiento parece no estar funcionando en algunas versiones de Android según lo informado here, y no hay respuesta definitiva de Google sobre esto (que parece ser principalmente 3.0 y 4.0 tienen este problema, 2.3 y abajo o 4.1 no parece verse afectado).

Lo sentimos, pero parece que no hay una solución en este momento para este error.

Answer 2

Lo sentimos, no tengo una respuesta y no tengo el nivel de reputación necesario todavía para dejar un comentario así que tengo que publicar esto como una "respuesta". He pasado mucho tiempo trabajando en esto tratando de encontrar una solución que no haya encontrado. Creé una página de prueba que proporciona información sobre lo que está sucediendo.

http://jsfiddle.net/RyLek/embedded/result/ < - DIV ajusta a desbordarse de auto http://jsfiddle.net/RyLek/2/embedded/result/ < - DIV conjunto de desbordarse desplazarse

El problema es la propiedad .scrollTop no se actualiza a la posición actual en un DIV cuando se desplaza hacia abajo. Además, cuando configura la propiedad scrollTop, en realidad no actualiza la posición de desplazamiento DIV.

En respuesta al comentario "Aitor Calderon" realizado en la respuesta anterior. Intenté configurar la propiedad de desbordamiento para desplazarme (ver la muestra anterior) y eso no tiene ningún efecto.

También he intentado algunos navegadores de terceros en el mercado como Maxthon y Dolphin que también tienen este problema. Si está ejecutando un dispositivo Android con ICS 4.0, puede descargar el navegador Google Chrome de la tienda Google Play en la que funciona la propiedad scrollTop. Esa no es una opción para mí, ya que nuestra empresa tiene dispositivos honeycomb que no son compatibles con este navegador.

Aquí hay una pregunta que publiqué sobre esta última semana sobre este tema: jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives? La respuesta fue intentar implementar esto en CSS, que no he podido lograr.

Answer 3

Parece que este problema solo ocurre cuando la propiedad de desbordamiento está configurada en 'desplazamiento' (que es la única vez que nos interesaría). Una solución que funcionó para mí fue establecer primero el desbordamiento a 'oculto', establecer el scrollTop, luego establecer el desbordamiento de nuevo a 'scroll'.

Answer 4

Necesitaba desplazarme de la parte superior de la página a un elemento específico, y .offset fue la solución para Android & iOS. .scrolltop solo funcionó en iOS.

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

Answer 5

Utilizo lo siguiente para el soporte de Android cuando uso scrollTop(). Funcionó bastante bien como una solución universal en mi experiencia.

El CSS:

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

El JS:

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

Answer 6

Una solución para mí fue:

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

es posible saltar al elemento con un ID específico.

Sé que no es la solución para todos, compre quizás pueda ayudar a alguien.