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

【问题标题】：How can I implement a scrollable <div> on iPad?如何在 iPad 上实现可滚动的 <div>？
【发布时间】：2011-08-23 23:36:14
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript html css ipad safari

【解决方案1】：

在 iPhone 和 iPad 上，您可以通过将两根手指放在单个元素上并拖动来滚动它们。

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

【讨论】：

您是否有任何 Apple 支持网址（比如他们说使用 2 指固定宽度/高度 div）
@hmthr：接近那个；支持页面只显示“框架”，但它适用于所有可滚动元素。无论如何，我已将其添加到我的答案中。
当单指事件发生时，您一般可以触发两指事件吗？这将使用带有最少 JS 的本机滚动功能。 onSingleDragStart() { doubleDragStart(); } 之类的？
两指滚动也适用于overflow: scroll; <DIV>
+1 原来我的 div 已经可以滚动了，我只是不知道我必须使用 2 个手指 :)

【解决方案2】：

我意识到这是一个较老的问题，但现在有一个更好的解决方案。我们现在可以访问-webkit-overflow-scrolling: touch; css 元素。请参阅here 以获取演示

【讨论】：

动量滚动 FTW！

【解决方案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);

【讨论】：

iScroll 是否可以免费用于商业用途？是否有任何许可问题？
另外我如何自定义它以进行水平或垂直滚动？
它是 MIT 许可的，是的，可免费用于商业用途。至于水平或垂直滚动，我不确定。自从我实施它以来已经有一段时间了。但我希望，如果你的溢出是正确的，并且你的东西大小合适，它应该会自动解决。您也可以单独禁用水平或垂直滚动条。
嘿乔恩...非常感谢详细的示例。我刚刚尝试在我的页面上实现并且似乎有 1 个问题..我的可滚动区域中有一些下拉菜单，当我使用 iScroll 时这些下拉菜单不起作用..这是某种已知问题还是有解决方法以及..再次感谢..
你是对的......我会放弃 iScroll 并寻找其他解决方案......但无论如何，非常感谢，我必须说你的答案真的很完美，切中要害。 ..不能要求任何更好的..U ROCK !!

【解决方案4】：

没有简单的本地方法可以让 div 用一根手指滚动，就像它是一个全屏面板一样。你可以像 Andy E 说的那样用两根手指，但是我怀疑大多数用户是否会知道这一点，而且 IMO 不是很容易发现。

Sencha 等可以做到这一点，但它不是 真正的（即原生）滚动，它使用各种 Javascript 技巧来近似它，如果你是做其他复杂的事情......

也就是说，iPad 上的 Yahoo Mail 等网络应用程序似乎让它运行得非常优雅。

【讨论】：

我不确定您是否正确，当您说“无法使 div 用一根手指滚动”...您可以在 iPad 上查看下面的演示； cubiq.org/dropbox/iscroll/index.html?v=3.7.1 是的，它似乎并没有减慢滚动速度...
我已经编辑了我的答案以澄清。它不能开箱即用，例如只需添加一个 CSS 标签或其他什么。您的示例使用 iScroll，它执行与 Sencha 相同的 JS 技巧。