jQuery scrollTop()无法在移动浏览器上滚动DIV,替代方案？

Question

我正在尝试滚动到滚动DIV中的特定位置.现在我使用jQuery scrollTop()函数的像素偏移量,它在桌面浏览器上运行良好,但除了谷歌的Chrome Android浏览器之外它在Android手机浏览器上不起作用(没有iOS设备来测试它是否有效).我找到的所有解决方案都是用于页面(窗口)滚动而不是用于在DIV中滚动,任何人都有任何关于我可以用来完成相同任务的建议吗？

这是一个例子:
http ://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/

我试过的其他东西在桌面浏览器中工作:

document.getElementById('ID_of_element_in_a_DIV').scrollIntoView();
document.getElementById('ID_of_DIV').scrollTop = 200;

编辑3/11/13:

这是一个知道Android浏览器问题:https://code.google.com/p/android/issues/detail？id = 19625

错误报告中的一位用户提出了一种解决方法:

因为只有在溢出属性设置为滚动时才会出现问题,您可以先将其设置为"隐藏",设置scrollTop属性,然后将其重置为"滚动"(或自动).使用滚动条重新呈现元素时,scrollTop属性似乎很荣幸.目前尚不清楚这是否有任何意想不到的副作用,但"它适用于我的机器!"

Answer 1

这对我有用:

setTimeout( function() {
    $(div).scrollTop(0)
}, 500 );

Answer 2

一种对我有用的解决方法：首先，将overflow属性临时设置为“ hidden”，然后设置scrollTop属性，然后将overflow属性设置为“ scroll”（或自动）。当将overflow属性重新设置为“ scroll”时，scrollTop值似乎保持不变。对于我测试过的所有浏览器（台式机和移动版），这都是一个非常简单的解决方法。我没有进行详尽的测试，也没有进行适当的过渡测试，因此可能会有一些我没有遇到过的副作用……您的工作量可能会有所不同-但这很容易尝试。

Answer 3

我在这里找到了答案http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/

手机不明白，$('html,body')所以你可以对手机执行以下操作

if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    window.scrollTo(0)
} else {
    // default `$('html,body')` code for scrolling
}

或者

只需使用$('body')而不是$('html, body').

Answer 4

我有几个解决方案供您尝试。您必须自己测试它们，因为我之前没有在移动浏览器中尝试过它们，但它们在这里：

1. 使用 jQuery 的.css()方法（或.animate()取决于您的最终目标）来调整上边距（注意：您必须将溢出更改为隐藏并将文本包装在内部 div 中，这将是您要调整其边距的元素）
2. 执行与第一个解决方案相同的操作，只不过将嵌入的 div 的位置设置为相对并调整其top属性。

如果您需要任何帮助或对此有任何其他疑问，请告诉我。祝你好运！:)

请注意，虽然我没有在移动设备上测试过它们，但它们基于 CSS 标准，而不是 jQuery 函数，所以它们应该可以工作。