CODEWITHSUNDEEP
cssscroll-snap
Janine Margueron
Janine Margueron

Reputation: 41

Trouble understanding scroll snap with inner scroll section

I am developing a website and have started exploring scroll-snap to create some effects. It works incredibly well between sections, which is great! However, whenever I have larger content within a section, I can't make it scroll normally. I have prepared a CodePen, but I'm struggling to understand the various parameters.

Here is my code

Here is my simplified HTML structure:

<div class="scrollable">
      <section class="gallery">
        <h2>Gallery image</h2>

        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </section>

      <section>
        <div class="wrapper">
          <h2>text scroll height</h2>
          <p>
            <!-- here stands a really long text --> 
           </p>
        </div>
      </section>

      <section class="footer">
        <h2>FOOTER</h2>
      </section>
  <div>

And my relevant CSS:

html {
  scroll-behavior: smooth;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
}


.scrollable {
  > section {
    height: 100vh;
    padding: 6vw;
    scroll-snap-align: start;
    overflow-y: auto;
  }
}

In my CodePen, I've simulated the content I have on my final site. I have an initial gallery that will eventually have effects added to each image, with the gallery being about 200vh tall. Then, I have a section of relatively long text, and I finish with a 100vh footer. However, I can't define the height of the middle section. The scroll-snap between sections works very well, but when I scroll in sections taller than 100vh, I get weird behavior and scroll jumps, making it difficult to read the important content.

I have added a forced height of 100vh and overflow-y: auto; for vertical scrolling if the content is larger. It works, but sometimes the middle section gets skipped if I scroll quickly...we scroll through the content without scrolling within the section. I do have scroll-snap-stop: always; on the parent content. How can I fix this?

Upvotes: 0

Views: 39

Answers (0)

Related Questions