scrollTop 不适用于 Android 手机

本文介绍了scrollTop 不适用于 Android 手机的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在为 Andriod 移动应用开发聊天功能，为此我使用了 jQuery 和 jQuery 移动主题前端.

我的问题是尝试使用 scrollTop() 函数在底部附加新消息.scrollTop() 函数在所有浏览器中都可以正常工作，但在 Andriod 中它不起作用......任何人对此都有任何想法.这是 HTML 代码:

<div data-role="内容"><div id="incomingMessages" style="height: 180px;overflow: auto;">

<label for="messageText"><strong>消息:</strong></label><表格宽度="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="启用">发送</a>

</td></tr><表格><tr><td><div id="endChatButton"><a data-role="button" id="chatCloseButton" name="chatCloseButton" value="EndChat" make_button_disabled="启用">结束聊天</a>

</td></tr>

这是滚动按钮的 jQuery 代码:

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

解决方案

这个问题似乎只有在 overflow 属性设置为 'scroll' 时才会发生(这是我们唯一关心的时候).对我有用的解决方法是首先将溢出设置为隐藏"，设置滚动顶部，然后将溢出设置回滚动".

Am developing chat functionality for Andriod mobile app, for this am using jQuery and jQuery mobile theme frontend.

My problem is am trying to use scrollTop() function to append new messages in bottom. scrollTop() function working fine in all browsers but in Andriod it is not working.. any one have any idea regarding this. Here is the 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>

Here is jQuery Code for 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); });

解决方案

It seems that this problem only happens when the overflow property is set to 'scroll' (which is the only time we would care about it). A workaround that worked for me was to first set the overflow to 'hidden', set the scrollTop, then set the overflow back to 'scroll'.