Fullscreen CSS scroll-snap container within a larger page

Question

I am trying to create a vertical slider-type thing using CSS scroll snapping. The issue I'm having is on the last "slide." I'm getting different behaviors across browsers and devices. With desktop, when you scroll back up I'm worried about the user getting confused when the slider is only half in view (i.e. which box is the user scrolling).

With mobile, there seems to be an issue with thumb focus. I have to deliberate select (tap) the slider container to scroll within that one.

Just curious what folks think on this. Most of the examples I find online don't have a section like mine where it switches from a snapping section to normal scroll. Is there a way to create a more seamless experience for the user?

I really like the experience on https://flyreel.co/ in the underwriting, claims, risk management section. Is there a way to recreate this using CSS scroll snap?

Thank you!

.scroll-wrap {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.scroll-wrap .scroll-section {
    scroll-snap-align: start;
  scroll-snap-stop: always;
}

.page {
  background-color: #ffd6d6;
}

.scroll-wrap {
  height: 100vh;
}

.scroll-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
}

.scroll-section.is-dark {
  background-color: #ebebeb;
}

.heading {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 10vw;
  line-height: 1;
}

<div class="page">
    <div class="scroll-wrap">
      <div class="scroll-section is-dark">
        <h2 class="heading">Defiant</h2>
      </div>
      <div class="scroll-section">
        <h2 class="heading">Loud</h2>
      </div>
      <div class="scroll-section is-dark">
        <h2 class="heading">Triumphant</h2>
      </div>
      <div class="scroll-section">
        <h2 class="heading">Proud</h2>
      </div>
    </div>
    <div class="section">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
    </div>
    <div class="section">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
    </div>
    <div class="section">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
    </div>
    <div class="section">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
    </div>
    <div class="section">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
    </div>
  </div>

Fullscreen CSS scroll-snap container within a larger page

0 Answers0