视差滚动的外部容器有一个标题和一个页脚

Question

我有一个CodePen Parallax示例，它可以正常工作。但是从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>