html - 使用具有页眉和页脚的外部容器进行视差滚动

我有一个CodePen Parallax example可以正常工作。但是删除显示：CSS中第9行没有显示标题和页脚，您将获得2个滚动条。

HTML：

<div class="outer">
  <header><h1>Header</h1></header>
  <div class="wrapper">
    <div class="section parallax">
     <h1>Heading</h1>
    </div>
    <div class="content">
      <h1>Site Content</h1>
    </div>
  </div>
  <footer><h1>Footer</h1></footer>
</div>

CSS：

body, html {
  margin: 0;
  padding:0;
}

/* remove the following to see the problem: */
header, footer {
  display: none;
}

.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}

.parallax::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('http://www.shainblumphoto.com/wp-
             content/uploads/2016/02/dubai_1.jpg');
}

.content {
  height: 200vh;
  display: flex;
  justify-content: center;
  background: red;
}

有谁知道拥有一个滚动条（包括滚动页眉和页脚，无需将页眉和页脚移动到包装器，没有JavaScript并仍保持视差效果）做出的更改？

最佳答案

请遵循结构。

<div class="outer">
    <div class="wrapper">
        <header><h1>Header</h1></header>
        <div class="section parallax">
            <h1>Heading</h1>
        </div>
        <div class="content">
            <h1>Site Content</h1>
        </div>
        <footer><h1>Footer</h1></footer>
    </div>
</div>

更新的答案：

body,
html {
  margin: 0;
  padding: 0;
}


/* remove the following to see
   the problem: */

.outer {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}

.parallax::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('https://via.placeholder.com/800');
}

.content {
  height: 200vh;
  display: flex;
  justify-content: center;
  background: red;
}

<div class="outer">
  <header>
    <h1>Header</h1>
  </header>
  <div class="wrapper">
    <div class="section parallax">
      <h1>Heading</h1>
    </div>
    <div class="content">
      <h1>Site Content</h1>
    </div>
  </div>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

关于html - 使用具有页眉和页脚的外部容器进行视差滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53092643/