scrollTop 不适用于 Android 手机
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12260279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scrollTop not working in Android mobiles
提问by Shaik Yasin Basha
Am developing chat functionality for Andriod mobile app, for this am using jQuery and jQuery mobile theme frontend.
我正在为 Andriod 移动应用程序开发聊天功能，为此我使用 jQuery 和 jQuery 移动主题前端。
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:
我的问题是试图使用 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>
Here is jQuery Code for 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);
});
回答by Allan Nienhuis
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'.
似乎这个问题只在 overflow 属性设置为 'scroll' 时发生（这是我们唯一关心它的时候）。对我有用的解决方法是首先将溢出设置为“隐藏”，设置滚动顶部，然后将溢出设置回“滚动”。
回答by Aitor Calderon
EDIT:I've found that if you set "top" style to, say, -120 it should "scroll" the div down by those 120px.
编辑：我发现如果您将“顶部”样式设置为 -120，它应该将 div 向下“滚动”120px。
Here an HTML example (sorry for all the inline styles):
这是一个 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>
And the Javascript part:
和 Javascript 部分：
<script type="text/javascript">
function init()
{
document.getElementById("setScroll").addEventListener('click',function()
{
document.getElementById("frm").style.top = -120;//Scroll by 120px
});
}
</script>
I have tested this on 3.0 and 4.0 versions of Android (I must say it was on the emulator thought).
我已经在 3.0 和 4.0 版本的 Android 上对此进行了测试（我必须说这是在模拟器上的想法）。
Hope this helps!
希望这可以帮助！
ORIGINAL MESSAGE:
原始信息：
Scroll top seems to not be working in some versions of Android as reported here, and there's no definitive answer from Google about this (looks like mainly 3.0 and 4.0 have this issue, 2.3 and bellow or 4.1 doesn't seem to be affected).
Scroll top 似乎无法在某些版本的 Android 中工作，正如这里所报告的那样，谷歌对此没有明确的答案（看起来主要是 3.0 和 4.0 有这个问题，2.3 和波纹管或 4.1 似乎没有受到影响）。
Sorry, but it seems like there's no solution right now for this bug.
抱歉，现在似乎没有针对此错误的解决方案。
回答by KyleGill
I use the following for Android support when using scrollTop(). Has worked pretty well as a universal fix in my experience.
使用 scrollTop() 时，我将以下内容用于 Android 支持。根据我的经验，作为通用修复方法效果很好。
The CSS:
CSS：
.androidFix {
overflow:hidden !important;
overflow-y:hidden !important;
overflow-x:hidden !important;
}
The JS:
JS：
$(yourSelector).addClass("androidFix").scrollTop(0).removeClass("androidFix");
回答by David
A workaround for me was:
我的解决方法是：
window.location.hash = '#element' + currentItem;
You can jump to the element with a specific id.
您可以跳转到具有特定 id 的元素。
I know thats not the solution for everyone, buy perhaps I can help somebody.
我知道那不是每个人的解决方案，购买也许我可以帮助某人。
回答by LukeS
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
http://jsfiddle.net/RyLek/embedded/result/<-- DIV 设置为自动溢出 http://jsfiddle.net/RyLek/2/embedded/result/<-- DIV 设置为溢出滚动
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.
问题是向下滚动时 .scrollTop 属性没有更新到 DIV 中的当前位置。此外，当您设置 scrollTop 属性时，它实际上不会更新 DIV 滚动位置。
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.
回应“Aitor Calderon”对上述答案的评论。我尝试将溢出属性设置为滚动（参见上面的示例），但没有任何影响。
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.
我也试过市面上的一些第三方浏览器，比如Maxthon和Dolphin，也有这个问题。如果您运行的是 android 4.0 ICS 设备，您可以从使用 scrollTop 属性的 Google Play Store 下载 Google Chrome 浏览器。这对我来说不是一个选择，因为我们公司主要有不支持此浏览器的蜂窝设备。
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.
这是我上周在这个问题上发布的一个问题：jQuery scrollTop() 在移动浏览器上滚动 DIV 时不起作用，替代方案？回应是尝试在 CSS 中实现这一点，但我没有成功实现。
回答by user3423547
I needed to scroll from the top of the page to a specific element, and .offset was the solution for me for Android & iOS. .scrolltop only worked in iOS.
我需要从页面顶部滚动到特定元素，而 .offset 是适用于 Android 和 iOS 的解决方案。.scrolltop 仅适用于 iOS。
$('html, body').animate({scrollTop: $('#element').offset().top + 20}, 10);
