Есть ли способ объединить перекрывающиеся полосы прокрутки? - PullRequest
Новая
       10

Есть ли способ объединить перекрывающиеся полосы прокрутки?

0 голосов
/ 15 апреля 2020

Поэтому я пытался эмулировать тот же эффект прокрутки, что и здесь, в этой истории NYT в разделе героев. Я смог заставить его работать в своей кодовой ручке, но, как вы увидите, когда вы прокручиваете вверх и вниз между разделом героя и основной текстовой областью, полосы прокрутки сталкиваются / перекрываются. Хотите знать, как лучше всего решить эту проблему, и есть ли способ иметь одну полосу прокрутки, как в истории. Я также поиграл с добавлением 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.io/phernand42/pen/abvoXab

...