jQuery的scrollTop（）不能在移动浏览器上滚动DIV，替代？ [英] jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?

问题描述

我正在尝试滚动到滚动DIV中的特定位置。现在，我正在使用jQuery scrollTop（）函数的像素偏移，该函数在桌面浏览器上效果很好，但它不适用于Android手机浏览器（Google的Chrome浏览器Android浏览器除外）（没有iOS设备来测试它是否可行）。我发现的所有解决方案都是针对页面（窗口）滚动，而不是在DIV中滚动，任何人都有什么建议可以用来完成相同的任务吗？

以下是一个示例：

http://jsfiddle.net/aQpPc/

http://jsfiddle.net/aQpPc/embedded/result/ p>

其他我在桌面浏览器中尝试过的工作：

 的document.getElementById（ 'ID_of_element_in_a_DIV'）scrollIntoView（）; 
 document.getElementById（'ID_of_DIV'）。scrollTop = 200; 
  

编辑3/11/13：

这是一个已知的android浏览器问题： https：//代码。 google.com/p/android/issues/detail?id=19625

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

因为只有当overflow属性设置为
设置为滚动时才会出现问题，您可以先将其设置为'hidden'，将scrollTop $设置为
属性，然后重新设置为滚动（或自动）。使用
滚动条重新呈现元素时，scrollTop
属性似乎很有用。目前尚不清楚这是否有任何意想不到的副作用，即
，但它在我的机器上运行！

解决方法

这适用于我：

  setTimeout（function（）{
 $（div ）.scrollTop（0）
}，500）; 
  

I am trying to scroll to a specific location in a scrolling DIV. Right now I am using a pixel offset with the jQuery scrollTop() function which works great on desktop browsers but it does not work on android mobiles browsers with the exception of Google's Chrome Android browser (do not have an iOS device to test if that works). All the solutions I have found are for page (window) scrolling and not for scrolling in a DIV, anyone have any suggestions on what else I can use to accomplish the same task?

Here is a example:
http://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/

Other things I have tried that work in desktop browsers:

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

EDIT 3/11/13:

This is a know android browser issue: https://code.google.com/p/android/issues/detail?id=19625

One user in the bug report suggested a workaround:

because the issue only seems to appear when the overflow property is set to scroll, you can first set it to 'hidden', set the scrollTop property, then reset it back to 'scroll' (or auto). The scrollTop property seems to be honored when the element is re-rendered with scrollbars. It's not clear if this has any unexpected side-effects, but "it works on my machine!"

解决方案

This worked for me:

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

这篇关于jQuery的scrollTop（）不能在移动浏览器上滚动DIV，替代？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！