HTML

Question

我有5个div容器。我想将第一个div渲染为视口的整个高度。在滚动时，下一个div占据视口的整个高度。我该怎么做？

HTML代码：

<div class="wrapper">

    <div id="first-container" >
            <p> hello </p>
    </div>

    <div id="second-container">
            <p> hello </p>
    </div>

    <div id="third-container">
            <p> hello </p>
    </div>

    <div id="four-container">
            <p> hello </p>
    </div>

    <div id="five-container">
        <p> hello </p>
    </div>

</div>

我找到了这个简单的CSS代码。它适用于第一个div但不允许我滚动到下一个div。

#first-container{
    position: fixed !important;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
#second-container{
    background-image: url("blue-gradient.png");
}

#third-container{
    background-color: #A8CEFF;
}

#four-container{
    background-image: url("green-gradient.png");
}

#five-container{
    background-color: #394457;
}

Answer 1

<强>更新
我已经创建了一个工作小提琴：https://jsfiddle.net/zrgLahbx/1/用于演示

如何设置视口的100％高度
您可以将height容器（div，#first-container等）的CSS #second-container属性设置为100vh。 < / p>

此100vh实际上意味着＆＃34;将高度设置为100%高度viewport（vh）。

像这样：

#first-container {
    height: 100vh;
}
#second-container {
    height: 100vh;
}
... and so on ...

就个人而言，我会为此创建一个类：

.full-viewport-height {
    height: 100vh;
}

然后将其应用于每个容器：

<div class="full-viewport-height" >
        <p> hello </p>
</div>

<div class="full-viewport-height">
        <p> hello </p>
</div>
... and so on ...

<强>此外
我还建议设置一个后备值（略高于100vh）。以防浏览器不支持vh - 相信我，我已经看到过这种情况。

像这样：

.full-viewport-height {
    height: 800px;
    height: 100vh;
}

CSS自上而下。因此，如果浏览器不支持vh，它将使用第一个值。

如果浏览器确实支持vh，则vh值将覆盖第一个px值。

如果可以的话，我会建议您使用em，而不是像素。

为什么您尝试过的工作
像您一样设置position: fixed属性，以及top，bottom ...等会使该div显示为fixed到屏幕的100％，并且不要移动无论。

然后令人困惑的是，您将位置设置为absolute。

希望这有帮助！：）

Answer 2

将您的html和body设置为height: 100%并将height: 100%应用于您的部分。像这样：

HTML

<div class="wrapper">
    <section>
        Content 1
    </section>
    <section>
        Content 2
    </section>
    <section>
        Content 3
    </section>
    <section>
        Content 4
    </section>
    <section>
        Content 5
    </section>
</div>

CSS

body, html {
    height: 100%;
    width: 100%;
}

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

Answer 3

您的位置代码将使任何DIV占据整个屏幕并忽略滚动。您需要将该代码拉出到类中：

.active {
  position: fixed !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

然后，您可以使用vh单位指定所有子DIV占据视口的100％。只有活动的一个可见，但你需要这个来阻止文档中的空间并计算它们的变化位置。

.wrapper>div {
  height: 100vh;
}

接下来，您需要点击scroll事件，并根据当前定位设置active类。

(function() {
  'use strict';
  var containers = [...document.querySelectorAll('.wrapper > div')],
    heights = containers.map(c => $(c).height()),
    scrollTops = [],
    currentIdx = 0,
    nextUp = null,
    nextDown = null;
  
  heights.forEach( (h,i) => scrollTops.push(h + scrollTops[i-1] || 0) );
  
  setCurrentIdx(0);
  
  function setCurrentIdx(idx){
    
    if (containers[currentIdx])
      containers[currentIdx].classList.remove('active');
    
    currentIdx = idx;
    containers[currentIdx].classList.add('active');
    
    nextUp = ( idx === 0 ? null : scrollTops[currentIdx]  );
    nextDown = ( idx === scrollTops.length - 1 ? null : scrollTops[currentIdx + 1] );
  }
  function move(direction){
    var newIdx = currentIdx + (direction === 'up' ? -1 : 1);
    
    if (newIdx < 0 || newIdx >= containers.length)
      return;
      
    setCurrentIdx(newIdx);
  }

  $(window).scroll(function() {
    var currentScroll = $(this).scrollTop();

    console.log(nextUp, '<--', currentScroll, '-->', nextDown);
    
    if (nextDown && currentScroll > nextDown) 
      move('down');
    
    if (nextUp && currentScroll <= nextUp) 
      move('up');
    
  });
  
}());

.wrapper>div {
  height: 100vh;
}
.wrapper{
  margin-bottom:100vh;
}
#first-container {
  background-color: gray;
}
#second-container {
  background-color: blue;
  ;
}
#third-container {
  background-color: #A8CEFF;
}
#four-container {
  background-color: green;
}
#five-container {
  background-color: #394457;
}
.active {
  position: fixed !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

  <div id="first-container" class="active">
    <p>hello 1</p>
  </div>

  <div id="second-container">
    <p>hello 2</p>
  </div>

  <div id="third-container">
    <p>hello 3</p>
  </div>

  <div id="four-container">
    <p>hello 4</p>
  </div>

  <div id="five-container">
    <p>hello 5</p>
  </div>

</div>

Div取整个视口高度，直到滚动到下一个div

3 个答案:

HTML

CSS