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

Question

我有一个 CodePen Parallax example可以正常工作。但是从 CSS 的第 9 行中删除 display: none 以显示页眉和页脚，您将获得 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，并且仍然保持视差效果，需要做哪些更改？

Answer 1

请遵循结构。

<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>