将 100vh 高度页面中的元素向上滚动并移出视图

Question

I have a simple HTML document with a height of 100vh . The element contains a title. Now when I scroll nothing happens as expected. What I need is an effect that the page stays the same and my title is scrolling up and out of the viewport. How can I achieve that?

My code simplified:

 html, body { margin: 0; padding: 0; } #wrapper { background-color: red; height: 100vh; width: 100%; } h1 { color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 <div id="wrapper"> <h1>Title</h1> </div>

Answer 1

You can do it the opposite way - not fixing the to-be-scrolled element, but the contents element which you put into the background by using a negative z-index:

Apply position:fixed to the wrapper and move it to the background with z-index: -1 . Erase position: absolute from the h1 to reset its position to static to allow it to scroll.

For the scrolling to be possible, you either need enough height for the title element (at least 150% or more), or another (possibly invisible) element that follows afterwards, like in my example below.

The text centering inside h1 can be done via flex (see below).

 html, body { margin: 0; padding: 0; height: 100%; } #wrapper { position: fixed; z-index: -1; background-color: red; height: 100vh; width: 100%; } h1 { color: white; display: flex; justify-content: center; align-items: center; height: 100%; margin: 0; } .something_else { height: 100%; }

 <div id="wrapper"> wrapper contents here... </div> <h1>Title</h1> <div class="something_else"></div>