CODEWITHSUNDEEP
cssscroll-snapscroll-snap-type
Cioccoluna
Cioccoluna

Reputation: 127

Why is my simple CSS scroll-snap not working?

I try to use the scroll-snap feature, but it's just not working. I'm so confused - what am I doing wrong??

HTML:

<!doctype html>
<html>
<body>

    <div class="section" style="background-color: peachpuff">
        <h2>Headline</h2>
        <p>My Text</p>
    </div>

    <div class="section">
        <h2>another Headline</h2>
        <p>Another line of text</p>
    </div>

    <div class="section" style="background-color: peachpuff">
        <h2>next Headline</h2>
        <p>Text line - lorem ipsum and stuff</p>
    </div>

    <div class="section">
        <h1>THE END OF THE SCROLL</h1>
    </div>

</body>
</html>

CSS:

body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 80%;
    margin: auto;
    scroll-snap-type: y mandatory;
}

h1, h2{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', Arial, sans-serif;
}
.section{
    display: flex;
    flex-direction: column;
    width:100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

https://codepen.io/Shampie/pen/vYOrOEW

Thanks in advance!

(first it's not enough code, now it's too much code and I need more text... I don't know what else to say about it)

Upvotes: 3

Views: 8764

Answers (1)

Luke
Luke

Reputation: 311

scroll-snap-type doesn't seem to work when it's assigned to the body element. You can fix it by assigning it to the html tag instead:

html {
  scroll-snap-type: y mandatory;
}
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 80%;
    margin: auto; 
}

But there's a problem: this used to work fine, but it behaves strangely in Chrome since a recent update to version 81 (for me, problems began yesterday).

Another approach is to wrap everything in a container element and assign scroll-snap-type to that:

.body {
    margin: 0; /* prevents a double scroll bar */
}
.scrollsnap-container {
    max-height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: mandatory; /* for older browsers */
    scroll-snap-points-y: repeat(100vh); /* for older browsers */
    scroll-snap-type: y mandatory;
  }
  .scrollsnap-section {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
  }

<div class="scrollsnap-container">
    <section id="slide-1" class="scrollsnap-section">
      <h2>slide 1</h2>
    </section>
    <section id="slide-2" class="scrollsnap-section">
      <h2>slide 2</h2>
    </section>
    <section id="slide-3" class="scrollsnap-section">
      <h2>slide 3</h2>
    </section>
    <section id="slide-4" class="scrollsnap-section">
      <h2>slide 4</h2>
    </section>
    <section id="slide-5" class="scrollsnap-section">
      <h2>slide 5</h2>
    </section>
  </div>

This seems to work better for me.

Upvotes: 19

Related Questions