Javascript 如何实现可滚动<；部门>；在iPad上？

我有一个页面使用可滚动的

：

…庞大的内容

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

---

您能提供一个解决方案吗（最好不使用Sencha等任何第三方框架）？

对于iPhone和iPad，您可以通过将两个手指放在各个元素上并拖动来滚动各个元素

---

…这使得这不再是一个真正的编程问题：-）

没有简单、自然的方法使div可以用一个手指滚动，就像它是一个全屏面板一样。你可以像Andy E说的那样用两个手指，但我怀疑大多数用户是否会知道这一点，在我看来，这不是很容易发现的

Sencha等可以做到这一点，但是它不是真实的（即本机）滚动，它使用各种Javascript技巧来近似它，并且如果你在做其他复杂的事情，它很可能会减慢速度并表现糟糕

---

也就是说，iPad上的Yahoo Mail之类的网络应用程序似乎让它运行得相当优雅。

在这个小项目的帮助下，我在解决这个问题上取得了很好的成功：

向下滚动至“如何使用”

编辑，仅在水平滚动时尝试此操作（使用iScroll）：

HTML：

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

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

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

document.addEventListener('DOMContentLoaded', loaded);

JavaScript：

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

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

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

document.addEventListener('DOMContentLoaded', loaded);

---

我意识到这是一个老问题，但现在有一个更好的解决方案。我们现在可以访问

-webkit溢出滚动：touchcss元素。查看演示
你有没有苹果支持的URL（比如他们说用两个手指固定宽度/高度div）@hmthr：接近这个；支持页面只显示“框架”，但它适用于所有可滚动元素。不管怎样，我已经把它添加到了我的答案中。当一个手指事件发生时，你能触发两个手指事件吗？这将使用本机滚动功能和最少的JS。类似于
onSingleDragStart（）{doubleDragStart（）；}
等？双指滚动也适用于
溢出：滚动
+1原来我的div已经可以滚动了，我只是不知道我必须用两个手指：）我不确定你说的“无法用一个手指滚动div”是否正确……你可以在iPad上看到下面的演示；是的，它似乎并没有减缓滚动…我编辑了我的答案来澄清。它不能开箱即用，例如简单地添加CSS标签或其他什么。您的示例使用的是与Sencha相同类型的JS欺骗的iScroll。iScroll是否免费用于商业用途？是否有任何许可证问题？我如何定制它来进行水平或垂直滚动？它是麻省理工学院许可的，所以是的，免费用于商业用途。至于水平或垂直滚动，我不确定。我已经有一段时间没有使用它了。但我希望，如果你的溢出是正确的，并且你的东西大小合适，它会自动工作。你也可以单独禁用水平或垂直滚动条。嘿，Jon…非常感谢你提供的详细示例。我刚刚尝试在我的页面上实现，似乎有一个问题..在我的可滚动区域中有一些下拉列表，当我使用iScroll时这些下拉列表不起作用..这是一个已知的问题还是有解决方法..再次感谢..你是对的..我将放弃iScroll并寻找其他解决方案..但无论如何，非常感谢，我必须说，你的答案真的很完美，说到点子上……再也没有比这更好的了……你太棒了！！动量滚动FTW！