android - scrollTop 在 Android 手机中不起作用

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>

这是滚动按钮的 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);
});

score 33 · Accepted Answer

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

score 3 · Accepted Answer

使用 scrollTop() 时，我将以下内容用于 Android 支持。根据我的经验，它作为一种通用的修复方法效果很好。

CSS：

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

JS：

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

score 3 · Accepted Answer

编辑：我发现如果您将“顶部”样式设置为 -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 上对此进行了测试（我必须说这是在模拟器上的想法）。

希望这可以帮助！

原始信息：

Scroll top 似乎在此处报告的某些版本的 Android 中不起作用，并且 Google 对此没有明确的答案（看起来主要是 3.0 和 4.0 有这个问题，2.3 和 bellow 或 4.1 似乎没有受到影响）。

抱歉，但目前似乎没有解决此错误的方法。

score 2 · Accepted Answer

我的一个解决方法是：

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

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

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

score 1 · Accepted Answer

Sorry, I do not have an answer and do not have the reputation level necessary yet to leave a comment so I have to post this as an "answer". I have spent a long time working on this trying to find a workaround have not found one. I have created a test page that gives some insight onto what is going on.

http://jsfiddle.net/RyLek/embedded/result/ <-- DIV set to overflow auto http://jsfiddle.net/RyLek/2/embedded/result/ <-- DIV set to overflow scroll

The problem is the .scrollTop property is not updating to the current position in a DIV when you scroll down. Also when you set the scrollTop property it does not actually update the DIV scroll position.

In response to the comment "Aitor Calderon" made on the above answer. I tried setting the overflow property to scroll (see above sample) and that does not have any affect.

I have also tried a few third party browsers in the market such as Maxthon and Dolphin which also have this issue. If you are running an android 4.0 ICS device you can download the Google Chrome browser from the Google Play Store which the scrollTop property DOES work in. That is not an option for me as our company mostly has honeycomb devices which do not support this browser.

Here is a question I posted about this last week on this issue: jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives? The response was to try and implement this in CSS which I have not been successful in accomplishing.

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

我注意到在 android .scrolltop() 中返回的值是decimals ，这会导致计算出现问题。我已经通过 alert($(this).scrollTop()); 进行了检查。

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

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

}

这对我有用！

score 0 · Accepted Answer

这将适用于许多浏览器和设备，并且非常简单。

var scrollToTopBtn = document.getElementById("backtotop")
var rootElement = document.documentElement

function scrollToTop() {
  // Scroll to top logic
  rootElement.scrollTo({
    top: 0,
    behavior: "smooth"
  })
}
scrollToTopBtn.addEventListener("click", scrollToTop)

div {
  height:1000px;
  width:100vw;
}

.topdiv {
  background:blue;
}
  
.otherdiv {
  background:yellow;
}

button {
  width:150px;
  height:150px;
  font-size:25px
}

<html>
  <body>
    <div class="topdiv"></div>
    <div class="otherdiv"></div>
    <footer>
      <button id="backtotop">BACK TO TOP</button>
    </footer>
  </body>
</html>

android - scrollTop 在 Android 手机中不起作用

8 回答 8

Related

Reference