Question

我有两个divs水平叠加在一起。

每个div占据视口的100％。

.section{
width:100%;
height:100%;
}

在每个div中，有一个锚到另一个div。

<div class="first section ">
<a name="first-section">&nbsp;</a>
<p>Click <a href="#second-section">here</a> to go to the second section</p> 
</div>

<div class="second section">
<p>Click <a href="#first-section">here</a> to go to the first section</p> 
</div>
<a name="second-section">&nbsp;</a>

我的目标是每次只显示一个div的内容。但是当第二部分div上有人并调整页面大小时，会在页面调整为初始大小时显示两个divs。

如何在页面调整大小时避免向上滚动？我有body{overflow:hidden;}。感谢。

Answer 1

您可以将div设置为position:fixed，因此它始终相对于视口。然后默认隐藏除第一个之外的所有div，并在:target上显示该div。

<强> jsFiddle example

html, body { height: 100%; }
body { margin: 0; }

.section {
  width: 100%;
  height: 100%;
  position: fixed;
}
.section:target {
  visibility: visible;
}
.first {
  background: lightblue;
}
.second {
  background: lightgreen;
  visibility: hidden;
}

<div class="first section" id="first-section">
  <p>Click <a href="#second-section">here</a> to go to the second section</p>
</div>

<div class="second section" id="second-section">
  <p>Click <a href="#first-section">here</a> to go to the first section</p>
</div>

或者，使用z-index使用不同的值，并将div移至:target上的顶部。

<强> jsFiddle example

html, body { height: 100%; }
body { margin: 0; }

.section {
  width: 100%;
  height: 100%;
  position: fixed;
}
.section:target {
  z-index: 3;
}
.first {
  background: lightblue;
  z-index: 2;
}
.second {
  background: lightgreen;
  z-index: 1;
}

<div class="first section" id="first-section">
  <p>Click <a href="#second-section">here</a> to go to the second section</p>
</div>

<div class="second section" id="second-section">
  <p>Click <a href="#first-section">here</a> to go to the first section</p>
</div>

注意，这两种方法都要求每个div都有一个固定的背景定义。

如何在调整页面大小时避免滚动？

1 个答案: