css - 在 pageid 控制的微型网站中滚动中断 - 仅在桌面 Safari 中

Question

更新: 我用所有相对定位的元素重建了页面，但当我通过 pageid 导航时，它仍然卡住了。我认为这绝对是 Safari 特定的重叠冲突，而且非常烦人。有什么想法吗？

我正在开发一个微型网站，该网站使用 pageid 在整页 div 中导航，垂直排列并 overflow hidden 。它适用于所有浏览器，包括移动设备，桌面版 Safari 除外。

当页面刷新到特定的 pageid 时，div 会滚动，如果文本被突出显示和拖动也会滚动，但是如果你从第 01 页开始导航到第 02 页(就像你应该的那样)，内容不会滚动。

这似乎是一个溢出冲突，但我试图通过页面 div 的水平滚动来分离 x 轴和 y 轴问题来做到这一点，但我什么也没得到。它的表现更像是在我和卷轴之间有一个透明层......

在此处查看微型网站:http://www.kevinjbeaty.com/trailtool-stackoverflow 请注意，它在其他任何地方都可以正常工作。

这是基本的 html:

<div class = "viewbox">

<div id= "page01" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>

<div id= "page02" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>

<div id= "page03" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
</div>

<div id= "page04" class="page">
<div class="content">
**these are photos that do not scroll**
</div>
<div class="contentscroll">
**this is text that should scroll**
</div>

</div>

和基本的CSS:

.viewbox {
position: relative;
height: 100%;
width: 100%;
display: block;
overflow: hidden;
background-color: black;
z-index:0;
}

.page {
position: relative;
height: 100%;
width: 100%;
display: block;
z-index:1;
overflow: scroll;
background-color: white;
z-index:10;
}

.content {
position: absolute;
padding: 2%;
background-size: contain;
background-repeat: no-repeat;
display: block;
}

.contentscroll {
position: absolute;
padding: 2%;
overflow-y: scroll;
overflow-x: hidden;
display: block;
z-index: 200;
}

Answer 1

明白了!哇。

我将主体“溢出”更改为“隐藏”，并完全摆脱了“.viewbox”包装器和中提琴!愚蠢的简单...