如何在iPad上实现可滚动的<div>？

Question

我有一个使用可滚动的页面<div>:

<DIV style="OVERFLOW-Y: hidden; WIDTH: 928px; OVERFLOW: scroll">
...Huge Content
</div>

现在虽然它在桌面浏览器中运行良好,但我无法在iPad上滚动.

您能否提供一个解决方案(最好不使用任何第三方框架,如Sencha等)？

Answer 1

使用iPhone和iPad,您可以通过将两根手指放在它们上并拖动来滚动各个元素.

• http://support.apple.com/kb/ht1484
• http://wyattlecadre.wordpress.com/2010/11/20/ios-quick-tip-two-finger-scrolling/

_{...这使得这不像一个编程问题:-)}

Answer 2

我意识到这是一个比较老的问题，但是现在有了更好的解决方案。现在，我们可以访问 -webkit-overflow-scrolling: touch;css元素。观看这里的演示

Answer 3

在这个小项目的帮助下，我在这个问题上取得了很好的成功：http://cubiq.org/iscroll。

向下滚动到“如何使用”。

编辑，尝试仅水平滚动（使用 iScroll）：

HTML：

<div id="wrapper">
    <div id="scroller">
        Huge Content...
    </div>
</div>

CSS：

#wrapper {
    position:relative;
    z-index:1;
    width: 926px
    height: 200px;
    overflow: hidden;
}

JavaScript：

function loaded() {
    document.addEventListener('touchmove', function(e){ e.preventDefault(); });
    myScroll = new iScroll('scroller', {vScrollbar:false});
}

document.addEventListener('DOMContentLoaded', loaded);