Question

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

页面设计的那个方面似乎没有任何问题，div会在Chrome，IE，Edge等中滚动没有问题。但是我昨天在我的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查看最新版本。我愿意接受建议。

ETA：成功！将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;
}

希望有所帮助。

除了移动Safari之外，我的网站的可滚动分区无处不在

1 个答案: