Footer becomes sticky after scrolling up inside a scroll snap container-CodePudding

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 >
    Footer
<footer>

CodePudding user response：

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 >
    Footer
<footer>

CodePudding user response：

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>