cssgoogle-chromescroll-snap-points

CSS scroll-snaps overflows body when reaching top

I'm having a pretty weird issue. Perhaps a bug in the scroll-snaps behaviour?

When I reach the top of the page and I keep scrolling up, then the body overflows and stays there if I do not scroll down again. Even when I reload the page.

Taking place only in Chrome for Mac (Version 75.0.3770.100 (Official Build) (64-bit)) I've tested it in Safari and Firefox and both seems to behave normally.

Reproduction online

Jsfiddle here but you can't reproduce it there. Probably because its inside an iframe?

Video of the issue:

enter image description here

Solution

  • Well I looked for similar problems and solutions, after fixing your use of snap-scrolling, could be adding this:

    html{
    height: 100%;
    overflow: hidden;
}
body{
    height: 100%;
    overflow: auto;
}

    In some case, it apperently isn't enough, so you can also add :

    body{
    overscroll-behavior: none;
}