Question

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

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

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

请您提供解决方案（最好不要使用Sencha等任何第三方框架）？

Answer 1

使用iPhone和iPad，您可以通过在其上放置两根手指并拖动来滚动单个元素。

_{...这使得这不是一个编程问题： - ）}

Answer 2

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

，请参阅here

Answer 3

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

Sencha等可以做到，但它不是真正的（即本机）滚动，它使用各种Javascript技巧来近似它，并且如果你是，它可能会变慢并且表现得很糟糕做其他任何复杂的事情......

也就是说，像iPad上的Yahoo Mail这样的网络应用程序似乎让它非常优雅。

Answer 4

在这个小项目的帮助下，我在这个问题上取得了很大的成功：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);

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

4 个答案: