Question

正在为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>

这是用于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);
});

Answer 1

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

Answer 2

编辑：我发现如果你将“顶级”风格设置为-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>

和Javascript部分：

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

我已经在3.0和4.0版本的Android上测试了这个（我必须说这是在模拟器上的想法）。

希望这有帮助！

原始讯息：

滚动顶部似乎无法在某些版本的Android中使用here报告，并且谷歌没有明确的答案（看起来主要是3.0和4.0有这个问题，2.3和贝娄或4.1没有'似乎受到了影响。）

很抱歉，但现在似乎没有解决此错误的方法。

Answer 3

使用scrollTop（）时，我使用以下Android支持。在我的经历中，它作为一种普遍的解决方案工作得非常好。

CSS：

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

JS：

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

Answer 4

我的解决方法是：

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

您可以跳转到具有特定ID的元素。

我知道这不是每个人的解决方案，也许我可以帮助别人。

Answer 5

抱歉，我没有答案，也没有必要的声誉级别发表评论所以我必须将其作为“答案”发布。我花了很长时间研究这个试图找到一个尚未找到的解决方法。我创建了一个测试页面，可以深入了解正在发生的事情。

http://jsfiddle.net/RyLek/embedded/result/＆lt; - DIV设置为自动溢出 http://jsfiddle.net/RyLek/2/embedded/result/＆lt; - DIV设置为溢出滚动

问题是当您向下滚动时，.scrollTop属性不会更新到DIV中的当前位置。此外，当您设置scrollTop属性时，它实际上不会更新DIV滚动位置。

回应上述答案所作的评论“Aitor Calderon”。我尝试将overflow属性设置为滚动（参见上面的示例）并且没有任何影响。

我还尝试过市场上的一些第三方浏览器，例如Maxthon和Dolphin，它们也有这个问题。如果您运行的是Android 4.0 ICS设备，则可以从Google Play商店下载Google Chrome浏览器，该浏览器可以使用scrollTop属性。这对我来说不是一个选项，因为我们公司主要拥有不支持此浏览器的蜂窝设备。

以下是我上周在此问题上发布的一个问题：jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?回复是尝试在CSS中实现这一点，但我还没有成功完成。

Answer 6

我需要从页面顶部滚动到特定元素，.offset是我和Android的解决方案。 iOS版。 .scrolltop仅适用于iOS。

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

Answer 7

我注意到在 android .scrolltop() 中以小数形式返回值，这会导致计算出现问题。我已经通过 alert($(this).scrollTop());

我建议使用 Math.round() 以使其与桌面和 IOS 一样可行。这就是我实现这一目标的方式：

var rounded = Math.round($(this).scrollTop());
if (rounded == $(this)[0].scrollHeight - $(this).height()) {

}

这对我有用！

scrollTop无法在Android手机中使用

7 个答案: