html - 防止overlay div随页面滚动

Question

我有一个 div，它在视口(viewport)中水平和垂直居中。所以我知道内容总是可以访问的，我允许页面在内容高于视口(viewport)时滚动。

这似乎工作正常，但是，我在 div 上使用 background-image 并在 :before 伪元素上覆盖以淡出背景.首先是背景滚动，我可以用 background-attachment: fixed 来解决。现在我遇到的问题是覆盖 div 与页面一起向上滚动，因此“折叠下方”区域现在没有变暗的背景。

我知道这与 position: absolute 有关，但是当我将位置更改为 fixed 时，达到了预期的效果，但叠加层覆盖了垂直滚动条 - 是有办法解决这个问题吗？

我知道我可以使用已经变暗的图像，但这是在其他地方使用并正在重复使用的标记，所以如果可能的话我想找到一个 CSS 解决方案。

提前致谢!

随附代码示例 + CodePen 版本 ( https://codepen.io/moy/pen/xxbwvdL )，具体取决于您的喜好。 :)

html,
body {
  margin: 0;
  padding: 0;
}

h1,
p {
  margin: 0 0 30px;
  padding: 0;
}

.masthead {
  background-color: rgb(0,0,0);
  background-image: url("https://www.fillmurray.com/1920/1080");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  overflow: hidden;
  overflow-y: auto;
  padding: 60px 0 30px;
  position: relative;
  width: 100%;
}

.masthead:before {
  background: rgba(0,0,0,.45);
  content: "";
  display: block;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}

.wrap {
  margin: auto;
  padding: 0 30px;
  z-index: 12;
  max-width: 900px;
}

.masthead--fullbleed {
  height: 100vh;
  overflow-y: auto;
}

<section class="masthead masthead--fullbleed">

  <div class="wrap wrap--narrow align-center">
    <div class="hgroup">
      <h1 class="hgroup__title">Title here</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</section>

Answer 1

呃，为什么当你被困在某件事上然后你发布并立即想到一个解决方案(我认为)。

基本上，我将 height: 100vh 更改为 min-height: 100vh 这似乎可以解决问题，除非有人能发现它的问题。附加片段以反射(reflect)这一点。

你可以看出我已经一年多没有编码了:/

html,
body {
  margin: 0;
  padding: 0;
}

h1,
p {
  margin: 0 0 30px;
  padding: 0;
}

.masthead {
  background-color: rgb(0,0,0);
  background-image: url("https://www.fillmurray.com/1920/1080");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  overflow: hidden;
  overflow-y: auto;
  padding: 60px 0 30px;
  position: relative;
  width: 100%;
}

.masthead:before {
  background: rgba(0,0,0,.45);
  content: "";
  display: block;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}

.wrap {
  margin: auto;
  padding: 0 30px;
  z-index: 12;
  max-width: 900px;
}

.masthead--fullbleed {
  min-height: 100vh;
  overflow-y: auto;
}

<section class="masthead masthead--fullbleed">

  <div class="wrap wrap--narrow align-center">
    <div class="hgroup">
      <h1 class="hgroup__title">Title here</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</section>