我的网站的可滚动 div 可以在除 Mobile Safari 之外的任何地方使用

Question

我正在开发一个网站http://strange.business，该网站旨在在 5 个可滚动查看 div 中加载 5 个随机故事。注意：目前只有 2 个故事。

页面设计的这方面似乎没有任何问题，在 Chrome、IE、Edge 等中，div 可以毫无问题地滚动。但我昨天在我 gf 的 iPad mini 上尝试过，div 被锁定由于某些原因。故事会加载，但不会滚动。

这些 div 的基本设置如下：

#display1 {
background-color: white;
height: 350px;
overflow: auto;
}

#display1Inner {
width: 100%;
height: 100%;
overflow: visible;

}

<div name="display1" id="display1" title="Display1">
        <span id="display1JavaWarning">You may need to enable 
            Javascript</span>           
        <object type="text/html" id="display1Inner"></object>
</div>

当页面加载时，它会执行一个 javascript 函数，该函数会选择一个随机预览 htm 文件，然后使用该数据填充 display1Inner 对象。我知道我的编码通常可能更严格，但它通常确实有效。显然在移动 Safari 上除外。

在研究了类似的问题后，我尝试了一堆 CSS 变体，但似乎没有任何效果。那个“溢出：可见；” bit 是我最近的尝试之一，但是当我第一次注意到这个问题时它并不存在。我不认识任何使用 iPhone 的人（奇怪的是），所以我不确定更高版本的 Safari 是否仍然会出现此问题，但我测试过的 iPad 并没有那么旧。我应该能够完成这项工作。有什么想法吗？

PS。该页面仍在进行中，如果您在浏览时遇到困难，请见谅。

ETA：好的，所以我将页面转换为在嵌套 div 中使用 iframe，现在它可以跨平台工作。这么多就解决了。耶！

但现在，我正在尝试摆脱在桌面浏览器中查看页面时出现的双滚动条。据我了解此解决方法，IOS Safari 完全无视 iframe 高度设置并以全长显示它们。因此需要 iframe-wrapper div 来控制它。因此，当我在“普通”浏览器窗口中查看它时，会出现额外的滚动条。如果我在 iframe-wrapper div 上禁用滚动，那么它会消除双滚动条，但也会中断 Safari 中的滚动。

您可以在http://strange.business/test.htm 查看最新版本。我愿意接受建议。

预计到达时间：成功！将 iframe 高度设置为 99% 并去掉边框后，它们看起来就像以前一样，没有额外的滚动条。现在可以跨平台滚动。我的生活中少了一个问题。感谢您的帮助！

Answer 1

您是否为您的 div 尝试过以下 CSS：

-webkit-overflow-scrolling: touch;
overflow-y: scroll;

我在这个 codepen 中遇到了这个解决方案： https://codepen.io/kristiegiles/pen/WveNaX?editors=110

它被设置为滚动 iframe，但我尝试用一​​些普通的 html 代替 iframe，它在我的 iPhone 上运行。

html 基本上是一个包裹你内容的 div：

<h1>scrolling on iOS</h1>
<div class="content">
<div class="iframe-wrapper">
// Your content here
</div>
</div>

将-webkit-overflow-scrolling: touch; 和overflow-y: scroll; 添加到应用于div 的类中：

html,body{
height:100%;
}
.content{
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.iframe-wrapper{
  position: absolute; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

希望对您有所帮助。