scrollTop的不工作在Android的手机 [英] scrollTop not working in Android mobiles

问题描述

正在开发的安卓手机应用程序的聊天功能，这是使用jQuery和jQuery Mobile主题的前端。​​

我的问题是想使用scrollTop的（）函数在底部追加新的消息。 scrollTop的（）函数工作正常，在所有的浏览器，但在安卓它不工作..任何一个有关于这个的想法。 下面是HTML code：

 ＆LT; D​​IV数据角色=页面ID =chatPage＆GT;
    ＆LT; D​​IV数据角色=内容＆GT;
        ＆LT; D​​IV ID =incomingMessages的风格=HEIGHT：180px;溢出：汽车;＆GT;
        ＆LT; / DIV＆GT;
        ＆LT;标签=的MessageText＆GT;＆LT;强＆gt;消息：＆LT; / STRONG＆GT;＆LT; /标签＆gt;
        ＆LT;表格的宽度=100％＆GT;
            ＆其中; TR＆GT;
                ＆LT; TD宽度=75％＆GT;
                    ＆LT; textarea的名字=的MessageTextID =的MessageText＆GT;＆LT; / textarea的＆GT;
                ＆LT; / TD＆GT;
                ＆LT; TD宽度=25％＆GT;
                    ＆LT; D​​IV ID =sendButtonId的风格=显示：块＆GT;
                        ＆LT;数据角色=按钮ID =chatSendButtonNAME =chatSendButton值=发送make_button_disabled =启用＆GT;
                            发送
                        ＆所述; / a取代;
                    ＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; /表＆gt;
        ＆LT;表＆gt;
            ＆其中; TR＆GT;
                ＆LT; TD＆GT;
                    ＆LT; D​​IV ID =endChatButton＆GT;
                        ＆LT;数据角色=按钮ID =chatCloseButtonNAME =chatCloseButton值=EndChatmake_button_disabled =启用＆GT;
                            结束聊天
                        ＆所述; / a取代;
                    ＆LT; / DIV＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; /表＆gt;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

下面是jQuery的$ C $下scrollbuttom：

  $（＃chatSendButton）。点击（函数（）{
    。VAR MES = $（＃的MessageText）VAL（）;
    $（＃incomingMessages）追加（＆LT; D​​IV CLASS ='消息'＆GT;＆LT;跨度类='用户名'＆GT;+管理+：+＆LT; / SPAN＆GT;+ MES +＆LT; / DIV＆gt;中）;
    $（＃incomingMessages）scrollTop的（$（＃incomingMessages）[0] .scrollHeight）。
}）;
 

解决方案

看来，当溢出属性设置为滚动（这是我们要关心它的唯一一次）这个问题只发生。为我工作的一种解决方法是首先设置的溢出来隐藏，设置scrollTop的，然后设置溢流回滚动。

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

这篇关于scrollTop的不工作在Android的手机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！