1

I found two CSS scroll-snaps examples from csstricks.com. However, one of them does not work on Chrome on Windows.

What is the difference between the two examples? Why does one of them work, and not the other?

Example 1:

.container {
    flex-basis: 50%;
    max-height: 100vh;
    overflow-y: scroll;
    border: 1px solid gray;
    scroll-snap-type: y mandatory;
    &.proximity {
            scroll-snap-type: y proximity;
    }
}

li {
    border-bottom: 1px solid white;
    padding: 3rem;
    font-size: 1.4rem;
    color: rgba(white, .5);
    background: lightgray;
    text-align: center;
    scroll-snap-align: start;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

Example 2:

body {
    font-family: sans-serif;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
}
section {
    border-bottom: 1px solid white;
    padding: 1rem;
    height: 100vh;
    scroll-snap-align: start;
    text-align: center;
    position: relative;
}

Edit: Thanks to Kaiido for solving this issue. As a I suspected it also solved the problem I had on a project I have been working on. I have sent an email to csstricks.com to notify them about the bug.

JonT
  • 55
  • 9

1 Answers1

3

Because by default the <body> doesn't scroll, <html> does.
Change the selector to :root and it will work in Chrome.

Though to be safe you'd be better defining your own scrolling area since older browsers were indeed using <body> as scrollingElement.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • 1
    Thanks. I have sent an email to csstricks.com to let them know. As suspected, it also solved a problem I had on one of my own [web projects](https://jontingvold.github.io/responsive-multicolumn-layout/). But the web page was to complex to let others debug. Again, thanks a lot. – JonT Nov 05 '19 at 00:12