触摸屏设备，溢出时无法滚动：自动和固定高度答案

【问题标题】：touch screen device, no scrolling possible with overflow:auto & fixed height触摸屏设备，溢出时无法滚动：自动和固定高度
【发布时间】：2011-04-11 08:28:58
【问题描述】：

我已经建立了一个主题，使其使用 100% 的页面高度。

布局的基本内容如下：div#container 包含 3 个 div，页眉、页脚、内容。所有定位到#container 的绝对位置，14% 的页眉高度，6% 的页脚高度，其余用于内容。所有 div，除了内容有溢出：隐藏，内容有溢出：自动。

它适用于大多数桌面浏览器（FF3.6+、IE 8+、Opera 10.5+、Chrome 实际）。在触摸屏设备上，它显示一切都很好，但我没有滚动条，也没有在#content 上滚动的可能性。

测试页面：http://pearlofdanube.hu

使用 Android 2.2 内置浏览器和 Opera Mobile 进行测试，有人报告它与 iPhone 相同。

是否有人知道正确的解决方法，而无需对布局进行基本更改？这客户真的希望任何类型的设备都具有相同的布局。

【问题讨论】：

我知道这是一篇旧文章，但你有没有为此找到一个 css/html 解决方案？我目前遇到了完全相同的问题...

标签： css touchscreen

【解决方案1】：

iSCroll 可能会对您有所帮助。您应该将所有内容的包装器设置为您希望滚动条的大小。那么：

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

'scroller' 是强制 id，它将被更改为您要滚动的元素的 id。希望这会有所帮助。

这是一个演示，您可能想看看http://cubiq.org/dropbox/iscroll4/examples/simple/

【讨论】：