在 HTML 小部件中滚动答案

【问题标题】：Scrolling in a HTML widget在 HTML 小部件中滚动
【发布时间】：2013-06-01 03:30:29
【问题描述】：

我制作了一个具有 4000 像素宽背景的网页，并且在 Windows、Mac 和 iPad 上的 Chrome 和 safari 中滚动效果很好。我可以毫无问题地滚动到左侧、顶部和右侧，就像您期望的那样。

但是当我将此页面转换为 .wdgt 格式时，将其导入 iBooks 并在 iPad 上预览 (4) 页面不会向任何方向滚动。

我尝试将overflow: scroll; -webkit-overflow-scrolling: touch; 添加到主体和容器的 CSS 中，但这不能解决问题。

HTML

<body>
<div id="container">
</div>
<body>

CSS

/* General */
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Verdana, sans-serif;

}

#container {
    width: 10158px;
    height: 974px;
    background: url(../img/1B.jpg) no-repeat;
    -webkit-background-size: 10158px 974px;

}

有谁知道如何解决这个问题？是 CSS 问题还是 JavaScript 问题？

提前致谢。

【问题讨论】：

发布一些代码。我在某些较旧的 iDevices 和 android 浏览器上无法滚动 Web 应用时遇到了类似的问题，问题是我必须删除一些以 100% 高度和宽度显示的元素。
我没有任何 100% 的高度/宽度，但我添加了一些代码。

标签： css ipad widget dashboard ibooks

【解决方案1】：

看看这里：

https://github.com/edwilde/iBooks-HTML-Widget-Boilerplate

这是专门为 iBooks 构建的样板，显然专门针对并解决了您的问题。

另一个建议是使用 iFrame，例如：

<div id="container" style="overflow: scroll; -webkit-overflow-scrolling: touch;">
    <iframe width="4000" height="100%" src=""> </iframe>
</div>

【讨论】：

因为我是这样做的，在我看到答案之前，我会给予赏金。
Ty，很高兴你把它整理好了：)

【解决方案2】：

你有没有在脑海中添加过类似的东西？
元名称=“视口”内容=“初始比例= 1.0，最大比例= 1.0”

【讨论】：