有什么方法可以合并重叠的滚动条？

Question

所以，我正在努力模仿在这里找到的同样的滚动效果。纽约时报的报道 在英雄部分。我能够在我的代码本中得到一些工作，但是你会看到当你在英雄部分和主文本区域之间上下滚动时，滚动条会碰撞重叠。我想知道如何解决这个问题，是否有办法像故事中一样只有一个滚动条。我还玩了一下添加 scrollbar-width: none; 但我不认为这是好的UX，当试图滚动到顶部时，看起来有点奇怪。

.video-bg-container video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  object-position: center top;
}

.video-bg-container {
  position: absolute;
}

.video-text-container {
  font-size: 2rem;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 55px;
  position: relative;
  overflow-y: scroll;
  .p-1 {
    margin-top: 40vh;
    margin-bottom: 80vh;
    background-color: tomato;
  }
  .p-2 {
    margin-bottom: 80vh;
    background-color: tomato;
  }
  .p-3 {
    margin-bottom: 80vh;
    background-color: tomato;
  }
}

.video-text {
  max-width: 40%;
  height: 100vh;
}

<div>
  <div class="video-bg-container">
    <video loop autoplay="true" muted="true" src="http://media.w3.org/2010/05/sintel/trailer.mp4"></video>
  </div>
  <div class="video-text-container">
    <div class="video-text">
      <div class="p-1">
        <p>Biltong rump venison shoulder capicola. Biltong bresaola picanha flank drumstick.</p>
      </div>
      <div class="p-2">
        <p>Biltong rump venison shoulder capicola. Biltong bresaola picanha flank drumstick.</p>
      </div>
      <div class="p-3">
        <p>Biltong rump venison shoulder capicola. Biltong bresaola picanha flank drumstick.</p>
      </div>
    </div>
  </div>
</div>
<div>
  <p>Boudin capicola flank turkey ham, picanha tenderloin burgdoggen pig kielbasa leberkas ribeye pork belly. Chuck salami meatloaf, sirloin flank kielbasa hamburger pork chop landjaeger brisket fatback tenderloin short loin short ribs venison. Brisket turkey
    pork belly tongue drumstick swine shoulder shank tail ball tip cupim capicola hamburger spare ribs meatball.</p>
  <p>Boudin capicola flank turkey ham, picanha tenderloin burgdoggen pig kielbasa leberkas ribeye pork belly. Chuck salami meatloaf, sirloin flank kielbasa hamburger pork chop landjaeger brisket fatback tenderloin short loin short ribs venison. Brisket turkey
    pork belly tongue drumstick swine shoulder shank tail ball tip cupim capicola hamburger spare ribs meatball.</p>
  <p>Boudin capicola flank turkey ham, picanha tenderloin burgdoggen pig kielbasa leberkas ribeye pork belly. Chuck salami meatloaf, sirloin flank kielbasa hamburger pork chop landjaeger brisket fatback tenderloin short loin short ribs venison. Brisket turkey
    pork belly tongue drumstick swine shoulder shank tail ball tip cupim capicola hamburger spare ribs meatball.</p>
  <p>Boudin capicola flank turkey ham, picanha tenderloin burgdoggen pig kielbasa leberkas ribeye pork belly. Chuck salami meatloaf, sirloin flank kielbasa hamburger pork chop landjaeger brisket fatback tenderloin short loin short ribs venison. Brisket turkey
    pork belly tongue drumstick swine shoulder shank tail ball tip cupim capicola hamburger spare ribs meatball.</p>
</div>

https:/codepen.iophernand42penabvoXab。

Answer 1

我走了一条不同的路线。在这个特殊的情况下，我使用了视差方法。

<div class="scroll-test">
    <div class="video-bg-container">
      <video loop autoplay="true" muted="true" src="http://media.w3.org/2010/05/sintel/trailer.mp4"></video>
    </div>
    <div class="video-text-container">
      <div class="field-items">
        <div class="field-item-text">
          <p>Biltong rump venison shoulder capicola.  Biltong bresaola picanha flank drumstick.</p>
        </div>
        <div class="field-item-text">
          <p>Biltong rump venison shoulder capicola.  Biltong bresaola picanha flank drumstick.</p>
        </div>
        <div class="field-item-text">
          <p>Biltong rump venison shoulder capicola.  Biltong bresaola picanha flank drumstick.</p>
        </div>
      </div>
    </div>
  </div>  
  <div class="main-text">
    <div class="main-text--inner">
    <p>Boudin capicola flank turkey ham, picanha tenderloin burgdoggen pig kielbasa leberkas ribeye pork belly.  Chuck salami meatloaf, sirloin flank kielbasa hamburger pork chop landjaeger brisket fatback tenderloin short loin short ribs venison.  Brisket turkey pork belly tongue drumstick swine shoulder shank tail ball tip cupim capicola hamburger spare ribs meatball.</p>
    <p>Boudin capicola flank turkey ham, picanha tenderloin burgdoggen pig kielbasa leberkas ribeye pork belly.  Chuck salami meatloaf, sirloin flank kielbasa hamburger pork chop landjaeger brisket fatback tenderloin short loin short ribs venison.  Brisket turkey pork belly tongue drumstick swine shoulder shank tail ball tip cupim capicola hamburger spare ribs meatball.</p>
    <p>Boudin capicola flank turkey ham, picanha tenderloin burgdoggen pig kielbasa leberkas ribeye pork belly.  Chuck salami meatloaf, sirloin flank kielbasa hamburger pork chop landjaeger brisket fatback tenderloin short loin short ribs venison.  Brisket turkey pork belly tongue drumstick swine shoulder shank tail ball tip cupim capicola hamburger spare ribs meatball.</p>
    <p>Boudin capicola flank turkey ham, picanha tenderloin burgdoggen pig kielbasa leberkas ribeye pork belly.  Chuck salami meatloaf, sirloin flank kielbasa hamburger pork chop landjaeger brisket fatback tenderloin short loin short ribs venison.  Brisket turkey pork belly tongue drumstick swine shoulder shank tail ball tip cupim capicola hamburger spare ribs meatball.</p>
    </div>
  </div>

.scroll-test {
  min-height: 100vh;
}

.video-bg-container video {
  z-index: -1;
  box-sizing: border-box;
  height: 56.25vw;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  position: fixed;
  top: 50%;
  width: 177.77777778vh;
}

.video-bg-container {
  height: 100vh;
}

.video-text-container {
  position: relative;
  display: flex;
  color: white;
  text-align: center;
  align-items: center;
  justify-content: center;
  bottom: 60vh;

  .field-items {
    font-size: 2.6rem;
    font-weight: bold;
    max-width: 40rem;
  }

  .field-item-text > div:first-child {
    margin-bottom: 65vh;
  }

  .field-item-text > div:last-child {
      margin-bottom: 10vh;
  }

  .field-item-text {
    margin-bottom: 65vh;
    padding: 0 1rem;
  }
 }

.main-text {
  position: relative;
  z-index: 1;
  background-color: white;

  h1 {
    padding-top: 2.5rem;
  }

  .main-text--inner {
    padding: 2rem;
  }

}

你可以在我的代码笔上看到一个演示。希望这能帮助和开放的任何反馈，以改善这个

https:/codepen.iophernand42penabvoXab。