Прокручивайте элементы на странице высотой 100vh вверх и вне поля зрения

Question

У меня есть простой HTML-документ с height из 100vh.Элемент содержит заголовок.Теперь, когда я прокручиваю, ничего не происходит, как ожидалось.Что мне нужно, так это то, что страница остается прежней, а мой заголовок прокручивается вверх и из области просмотра.Как мне этого добиться?

Мой код упрощен:

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

Вы можете сделать это противоположным способом - не исправляя элемент для прокрутки, а элемент содержимого, который вы помещаете в фон, используя отрицательный z-индекс:

Применить position:fixed коберните и переместите его на фон с помощью z-index: -1.Сотрите position: absolute с h1, чтобы сбросить его положение на static, чтобы позволить ему прокручиваться.

Чтобы прокрутка была возможной, вам нужно либо достаточно высоты для элемента заголовка (не менее 150% или более), либо другого (возможно, невидимого) элемента, который следует после, как в моем примере ниже.

Текстовое центрирование внутри h1 может быть выполнено с помощью flex (см. Ниже).

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>