Footer becomes sticky after scrolling up inside a scroll snap container

Question

I'm creating a website which contains sections with a scroll snap container. Each section should take 100% of the screen (100vh). Unfortunately, when I scroll all the way down to the footer and scroll up again, the footer becomes sticky in Google Chrome (haven't tested any other browsers yet)

What I want to achieve: The footer should not become sticky. The snapping behaviour can be fully ignored for the footer.

You can see the the behaviour in the link below. Just scroll all the way down to the footer and scroll up again. The footer will become sticky... I have tried to set position: absolute to the footer but nothing really worked.

Thank you guys!

main {
    croll-snap-type: y mandatory;
    flex-flow: column;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100vh;
    min-height: 100vh;
}

section {
    height: 100vh;
    width: 100%;
    background-color: blue;
    scroll-snap-align: start;
}

section:nth-of-type(2) {
  background-color: orange;
}

<main>
    <section>
      Section
    </section>
    <section>
      Section
    </section>
</main>
<footer class="footer">
    Footer
<footer>

You are likely on a Mac. Turn on Always for scrollbars in System Preferences to see what's occurring. Hint: it's the two scrollbars: https://imgur.com/a/qey36Vb — Leland, Dec 09 '22 at 14:09
@Leland Thank you! I haven't thought about that. This might help me to understand what's going on — Phillip, Dec 09 '22 at 14:12
@Brewal ...but why is that? Because I set `main { height: 100vh; }` shouldn't that tell the main tag to take up 100% of the screen height? — Phillip, Dec 09 '22 at 14:14
@Phillip I tried to fix your code in my answer. Hope I understood what you want to do — Brewal, Dec 09 '22 at 14:28

Brewal · Answer 1 · 2022-12-09T14:33:33.007

Your main element is set to height 100vh and both of your sections are set to height 100vh.

You have overflow-y: scroll; on your main. So basically, when you scroll down on your page, you scroll on the main element that have a content of 2x the height of your screen.

When you reach the down of the main, you start to scroll down the entire page. So you start to see the footer.

When you scroll up, you might be scrolling into the main element again. So the footer just "stays" there because you are not scrolling the page.

I think you can get the desired behavior by removing overflow-y and height on the main element

main {
    croll-snap-type: y mandatory;
    flex-flow: column;
    overflow-x: hidden;
    min-height: 100vh;
}

section {
    height: 100vh;
    width: 100%;
    background-color: blue;
    scroll-snap-align: start;
}

section:nth-of-type(2) {
  background-color: orange;
}

<main>
    <section>
      Section
    </section>
    <section>
      Section
    </section>
</main>
<footer class="footer">
    Footer
<footer>

Thanks for helping me! This isn't really what I want. I want the sections to snap. But I just saw that it didn't work in my initial code snippet. I think I found a solution, see my answer. It's going to be hard to implement this on my website but it works the way I want it to work. Thanks for pointing out that I was scrolling inside two different elements, that really helped me! — Phillip, Dec 09 '22 at 14:35
Indeed, I missed the snap rule ! You can go with your solution indeed ! Or wrap `main` and `footer` inside another div i.e. — Brewal, Dec 09 '22 at 14:41

score 0 · Answer 2 · answered Dec 09 '22 at 14:34

I think I solved my problem.

body {
    max-height: 100vh;
    overflow: hidden;
}

main {
    scroll-snap-type: y mandatory;
    flex-flow: column;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100vh;
    min-height: 100vh;
}

section {
    scroll-snap-align: start;
    min-height: 300px;
    height: 100vh;
    width: 100vw;
}

section:nth-of-type(2) {
  background-color: orange;
}

footer {
  scroll-snap-align: start;
}

<main>
    <section>
      Section
    </section>
    <section>
      Section
    </section>
    <footer>
      Footer
    <footer>
</main>

Footer becomes sticky after scrolling up inside a scroll snap container

2 Answers2