scrollTop无法在Android手机中使用

Sha*_*sha 10 jquery android jquery-ui jquery-mobile cordova

正在为Andriod移动应用程序开发聊天功能,因为这是使用jQuery和jQuery移动主题前端.

我的问题是尝试使用scrollTop()函数在底部追加新消息.scrollTop()函数在所有浏览器中都运行良好,但在Andriod中它不起作用..任何人对此都有任何想法.这是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>
Run Code Online (Sandbox Code Playgroud)

这是用于scrollbuttom的jQuery代码:

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

All*_*uis 30

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

  • 只有2分?你应该获得奖章或其他东西.至少依靠阿根廷某些人的永恒感激. (3认同)

Ait*_*ron 3

编辑:我发现如果你将“top”样式设置为-120,它应该将 div 向下“滚动”120px。

这是一个 HTML 示例(抱歉所有内联样式):

<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>
Run Code Online (Sandbox Code Playgroud)

Javascript 部分:

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

我已经在 Android 3.0 和 4.0 版本上对此进行了测试(我必须说这是在模拟器上的想法)。

希望这可以帮助!

原始信息:

滚动顶部似乎无法在某些版本的 Android 中工作,正如此处报道的那样,Google 对此没有明确的答案(看起来主要是 3.0 和 4.0 有这个问题,2.3 和波纹管或 4.1 似乎不受影响)。

抱歉,此错误目前似乎没有解决方案。

  • 这个错误至少缩短了我几天的寿命。:( (6认同)