Javascript jQuery scrollTop() 在移动浏览器上滚动 DIV 时不起作用，替代方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12225456/
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
jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?
提问by LukeS
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?
我正在尝试滚动到滚动 DIV 中的特定位置。现在我正在使用带有 jQuery scrollTop() 函数的像素偏移，该函数在桌面浏览器上运行良好，但在 android 移动浏览器上不起作用，谷歌的 Chrome Android 浏览器除外（没有 iOS 设备来测试它是否有效）。我找到的所有解决方案都是用于页面（窗口）滚动而不是用于在 DIV 中滚动，有人对我可以使用什么来完成相同的任务有任何建议吗？
Here is a example:
http://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/
这是一个例子：
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:
编辑 3/11/13：
This is a know android browser issue: https://code.google.com/p/android/issues/detail?id=19625
这是一个已知的 android 浏览器问题：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!"
因为这个问题似乎只在溢出属性设置为滚动时出现，您可以先将其设置为“隐藏”，设置 scrollTop 属性，然后将其重置回“滚动”（或自动）。当使用滚动条重新渲染元素时，scrollTop 属性似乎受到尊重。目前尚不清楚这是否有任何意想不到的副作用，但“它在我的机器上有效！”
回答by wayofthefuture
This worked for me:
这对我有用：
setTimeout( function() {
$(div).scrollTop(0)
}, 500 );
回答by Allan Nienhuis
A workaound that worked for me: first, temporarily set the overflow property to 'hidden', then set the scrollTop property, then set the overflow property back to 'scroll' (or auto). The scrollTop value seems to be kept intact and honored when the overflow property is set back to 'scroll'. This was a pretty trivial workaround that worked on all browsers I tested on (desktop and mobile). I didn't test it exhaustively, and I didn't test with transitions in place, so there may be side-effects that I haven't encountered... Your mileage may vary - but it's an easy thing to try.
一个对我有用的解决方法：首先，暂时将溢出属性设置为“隐藏”，然后设置 scrollTop 属性，然后将溢出属性设置回“滚动”（或自动）。当溢出属性设置回“滚动”时，scrollTop 值似乎保持不变并受到尊重。这是一个非常简单的解决方法，适用于我测试过的所有浏览器（桌面和移动）。我没有对它进行详尽的测试，也没有对适当的过渡进行测试，所以可能会有我没有遇到过的副作用......你的里程可能会有所不同 - 但这是一件很容易尝试的事情。
回答by Gaurav Aggarwal
I found the answer here http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/
Mobile phones doesn't understand $('html,body')so u can do the following for mobile
手机看不懂$('html,body')所以你可以为手机做以下事情
if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
window.scrollTo(0)
} else {
// default `$('html,body')` code for scrolling
}
OR
或者
simply use $('body')instead of $('html, body').
只需使用$('body')代替$('html, body').
回答by lofihelsinki
The only way i could achieve scrolling to the top of the page on a Galaxy Tab was hiding the page bodyfor 100ms while scrolling. Using jQuery:
我可以在 Galaxy Tab 上实现滚动到页面顶部的唯一方法是body在滚动时将页面隐藏100 毫秒。使用jQuery：
$("body").hide();
window.scrollTo(0, 0);
setTimeout(function(){ $("body").show() }, 100);
回答by Gray Ayer
rather than using the scroll, scrollTo, or scrollTop methods (which give me problems in mobile), I recommend setting an ID on your top DOM element (like #top), and just using:
与其使用 scroll、scrollTo 或 scrollTop 方法（这会给我在移动设备上带来问题），我建议在顶部 DOM 元素（如 #top）上设置一个 ID，然后只使用：
document.getElementById("top").scrollIntoView();
that works the best for me so far across all devices and browsers.
到目前为止，它在所有设备和浏览器中对我来说效果最好。
回答by Zachary Kniebel
I have a couple solutions for you to try. You will have to test them yourself, as I have not tried them in a mobile browser before, but here they are:
我有几个解决方案供您尝试。您必须自己测试它们，因为我之前没有在移动浏览器中尝试过它们，但它们是：
- Use jQuery's
.css()method (or.animate()depending on what your eventual goal us) to adjust the top margin (note: you would have to change the overflow to hidden and wrap the text in an inner div, which would be the element whose to margin you are adjusting) - Do the same thing as in the first solution, except set the embedded div's position to relative and adjust it's
topattribute.
- 使用 jQuery 的
.css()方法（或.animate()取决于您的最终目标）来调整顶部边距（注意：您必须将溢出更改为隐藏并将文本包装在内部 div 中，这将是您要调整其边距的元素) - 做与第一个解决方案相同的事情，除了将嵌入的 div 的位置设置为相对并调整它的
top属性。
Let me know if you need help with any if this or have any more questions about this. Good luck! :)
如果您需要任何帮助或对此有任何疑问，请告诉我。祝你好运！:)
Note that although I have not tested these in mobile before they are based on CSS standards, not jQuery functions, so they should work.
请注意，虽然我在基于 CSS 标准而不是 jQuery 函数之前没有在移动设备中测试过它们，但它们应该可以工作。
回答by mklement0
Temporarily setting the overflowproperty to 'hidden', as recommended in @Allan Nienhuis' answer, does not work on Android 4.0.3, for instance (which is, e.g., what the Kindle Fire 2s are running) - when you set overflowback to scroll, the element scrolls back to the top.
暂时将overflow属性设置为“隐藏”，如@Allan Nienhuis 的回答中所建议的，不适用于 Android 4.0.3，例如（例如，Kindle Fire 2s 正在运行的内容） - 当您设置overflow回 时scroll，元素会滚动回到顶部。
Alternatives:
备择方案：
Roll your own scrolling via a helper function, as demonstrated here- while this is simple to implement, it is bare-bones in that it doesn't give you inertial scrolling or overscrolling.
Use a library such as iScroll, which implements its own, sophisticated scrolling (inertial, overscrolling) based on CSS transformations.
通过一个辅助功能推出自己的滚动，这表现在这里-而这很容易实现，这是赤裸的，因为它不会给你的惯性滚动或滚动反弹。
使用诸如iScroll 之类的库，它基于 CSS 转换实现自己的复杂滚动（惯性、过度滚动）。
Using iScroll requires a bit of setup, though: you need a wrapperdivwith fixed height and style overflow: hiddenand the element to scroll should have nooverflowstyle. This jsFiddle demoshows how it's done.
但是，使用 iScroll 需要一些设置：您需要一个具有固定高度和样式的包装器div，overflow: hidden并且要滚动的元素应该没有overflow样式。这个 jsFiddle 演示展示了它是如何完成的。
回答by user2823361
Use the following code:
使用以下代码：
$("body").animate( { scrollTop: 50, }, 800, function(){
$("body").clearQueue();
} );
回答by hitecherik
Try using jQuery's .animate method:
尝试使用 jQuery 的 .animate 方法：
$('.div').animate({ scrollTo: x; });
Where x is equal to the position of the div you want to scroll to the top of.
其中 x 等于要滚动到顶部的 div 的位置。
回答by Rohi
Did you try this ?
你试过这个吗？
$("html").scrollTop(0);
