Parallax scrolling with outer container that has a header and a footer - html

Question

I have a CodePen Parallax example that works fine as is. But remove the display: none from line 9 in the CSS to show the header and footer and you get 2 scrollbars.
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;
}
Does anyone know what change to make to have one scrollbar that includes scrolling of the header and footer, without moving the header and footer to the wrapper, without JavaScript, and still maintain the parallax effect?

Answer 1

Please follow structure.
<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>
Updated answer:
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>