Question

更新：我用所有相对定位的元素重建了页面，当我通过pageid导航时，事情仍然停滞不前。我认为它肯定是特定于Safari的重叠冲突，而且非常烦人。那里有什么想法吗？

我在微型网站上工作，使用pageid来浏览整页div，垂直排列并隐藏溢出。它适用于所有浏览器，包括移动设备，桌面版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”包装和中提琴！愚蠢的简单...

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

1 个答案: