scrollTop 在 Android 手机中不起作用

Posted 2023-05-06

【中文标题】scrollTop 在 Android 手机中不起作用

【英文标题】：scrollTop not working in Android mobiles

【发布时间】：2012-08-28 22:10:31

【问题描述】：

正在为 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 >
            <tr>
                <td >
                    <textarea name="messageText" id="messageText"></textarea>
                </td>
                <td >
                    <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);
);

【问题讨论】：

您可能会发现这也很有帮助：***.com/questions/9316415/…

这个基本问题现在应该在 Safari 移动版和 Chrome 移动版中都已修复...？请问有人有一个可行的解决方案吗？

【参考方案1】：

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

【讨论】：

只有2分？应该给你一枚奖章什么的。至少要指望阿根廷某个人的永恒感激之情。

我无法重现这个 - 你能添加一个 jsfiddle 演示吗？

@GabrielFlorit 您要将您的请求发送给谁？谢克还是我？我不会生成一个 JSFiddle 来证明我的答案——这只是一个对我有用的建议（并且在这个问题的 android 浏览器错误报告中被引用）。如果它对您不起作用，我不知道该建议什么 - 这个问题已经很老了，现在可能已经解决了。

这应该是答案。 @AllanNienhuis 确实应该获得奖牌。

对于此解决方法，您只需暂时将溢出设置为隐藏。这三个步骤在同一事件中一个接一个地发生。用户永远不会注意到溢出设置为隐藏。溢出仅在设置 scrollTop 的那一刻被隐藏。一旦设置了 scrollTop 并将溢出设置回滚动，UI 就会保持在所需的状态。

【参考方案2】：

编辑：我发现如果您将“顶部”样式设置为 -120，它应该将 div 向下“滚动”120 像素。

这是一个 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 上对此进行了测试（我必须说这是在模拟器上的想法）。

希望这会有所帮助！

原始信息：

据报道here，滚动顶部似乎无法在某些版本的 Android 中工作，并且 Google 对此没有明确的答案（看起来主要是 3.0 和 4.0 有这个问题，2.3 和 bellow 或 4.1 似乎没有会受到影响）。

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

【讨论】：

感谢 Aitor 的回复.. 我们有什么替代方案吗.. 滚动和消息可以附加到 div 的底部.. 提前谢谢..

我试图解决这个错误，因为我使用了我附加的谷歌群组页面上发布的示例。我找到了将css溢出属性设置为“滚动”的解决方案。在桌面浏览器上也会出现强制滚动条，但在 android 中不会发生，因此尝试将溢出设置为仅在 android 设备上滚动可能是一种解决方案。如果这有帮助，请告诉我，我会根据我的发现修改答案。

这个错误使我的寿命减少了至少几天。 :(

我用另一种滚动方式编辑了我的答案，希望这会有所帮助。

【参考方案3】：

在使用 scrollTop() 时，我使用以下内容来支持 Android。根据我的经验，它作为一种通用修复非常有效。

CSS：

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

JS：

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

【参考方案4】：

我的解决方法是：

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

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

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

【参考方案5】：

抱歉，我没有答案，也没有发表评论所需的声誉级别，所以我必须将此作为“答案”发布。我花了很长时间来解决这个问题，试图找到一种解决方法，但没有找到。我创建了一个测试页面，可以让您深入了解正在发生的事情。

http://jsfiddle.net/RyLek/embedded/result/ http://jsfiddle.net/RyLek/2/embedded/result/

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

回应对上述答案的评论“Aitor Calderon”。我尝试将溢出属性设置为滚动（参见上面的示例），但没有任何影响。

我也试过市面上的一些第三方浏览器，比如傲游和海豚，也有这个问题。如果您运行的是 android 4.0 ICS 设备，您可以从 Google Play 商店下载 Google Chrome 浏览器，该浏览器可以使用 scrollTop 属性。这对我来说不是一个选择，因为我们公司的蜂窝设备大多不支持此浏览器。

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

【参考方案6】：

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

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

【讨论】：

这在 Windows Phone 中不起作用。令人讨厌的是，scrollTop(0) 确实如此。因此，这个答案和 WP 的一些设备检测为我修复了它。

【参考方案7】：

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

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

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

这对我有用！

【参考方案8】：

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

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>