javascript 如何在 iPad 上实现可滚动的 <div>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5976111/
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
How can I implement a scrollable <div> on iPad?
提问by hmthr
I have a page which uses a scrollable <div>:
我有一个使用可滚动的页面<div>：
<DIV style="OVERFLOW-Y: hidden; WIDTH: 928px; OVERFLOW: scroll">
...Huge Content
</div>
Now while it works fine in desktop browsers, I am unable to scroll on the iPad.
现在虽然它在桌面浏览器中运行良好，但我无法在 iPad 上滚动。
Could you please provide a solution (preferably without the use of any 3rd party frameworks like Sencha, etc.)?
您能否提供一个解决方案（最好不要使用任何第三方框架，如 Sencha 等）？
采纳答案by Jon Nylander
I've had good success with this problem with the help of this little project: http://cubiq.org/iscroll.
在这个小项目的帮助下，我在这个问题上取得了很好的成功：http: //cubiq.org/iscroll。
Scroll down to "how to use".
向下滚动到“如何使用”。
EDIT, try this for only horizontal scroll (using iScroll):
编辑，仅针对水平滚动尝试此操作（使用 iScroll）：
HTML:
HTML:
<div id="wrapper">
<div id="scroller">
Huge Content...
</div>
</div>
CSS:
CSS:
#wrapper {
position:relative;
z-index:1;
width: 926px
height: 200px;
overflow: hidden;
}
JavaScript:
JavaScript:
function loaded() {
document.addEventListener('touchmove', function(e){ e.preventDefault(); });
myScroll = new iScroll('scroller', {vScrollbar:false});
}
document.addEventListener('DOMContentLoaded', loaded);
回答by Andy E
With iPhone and iPad, you can scroll individual elements by placing two fingers on them and dragging.
使用 iPhone 和 iPad，您可以通过将两个手指放在单个元素上并拖动来滚动它们。
- http://support.apple.com/kb/ht1484
- http://wyattlecadre.wordpress.com/2010/11/20/ios-quick-tip-two-finger-scrolling/
- http://support.apple.com/kb/ht1484
- http://wyattlecadre.wordpress.com/2010/11/20/ios-quick-tip-two-finger-scrolling/
...which makes this less of a programming question really :-)
...这使得这真的不是一个编程问题:-)
回答by davehale23
回答by funkybro
There is no easy, native way to make divs scrollable with one finger, as if it were a full screen panel. You can use two fingers like Andy E says, however I doubt whether most users will know about this, and it's not very discoverable IMO.
没有简单的原生方法可以让 div 用一根手指滚动，就好像它是一个全屏面板一样。您可以像 Andy E 所说的那样使用两个手指，但是我怀疑大多数用户是否会知道这一点，而且 IMO 并不是很容易发现。
Sencha etc can do it, however it's not real(i.e. native) scrolling, it's using all sorts of Javascript trickery to approximate it, and is liable to slow down and behave badly if you're doing anything else complex...
Sencha 等可以做到这一点，但是它不是真正的（即原生）滚动，它使用各种 Javascript 技巧来近似它，并且如果您正在做其他任何复杂的事情，很可能会减慢速度并表现不佳......
That said, web apps like Yahoo Mail on the iPad seem to make it work quite elegantly.
也就是说，iPad 上的 Yahoo Mail 等网络应用程序似乎使它的运行非常优雅。
