CODEWITHSUNDEEP
htmlcssgoogle-chrome
sminton
sminton

Reputation: 261

Scroll Snap Bug (Chrome on Mac) - allowing scroll up into the HTML void

Trying to work out if this is a bug with Chrome or with my code. With the below code, when I scroll down it does what I want it to, but when I scroll up it lets me scroll as high as I want without the body snapping back. I've applied the scroll snapping to html because it does not work in Chrome if on body.

Demo: http://manifest.thedevtest.com/scrollsnap/ (scroll up)

Code:

<html>
<head>
    <title>Chrome Scroll Snap Issue Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {

          scroll-snap-type: mandatory;
            scroll-snap-points-y: repeat(100vh);
            scroll-snap-type: y mandatory;
            background: red;
        }

        section {
            height: 100vh;
            width: 100vw;
            scroll-snap-align: start;
        }
        .foo {
            background-color: green;
        }
        .bar {
            background-color: blue;
        }
        </style>
</head>
<body>
    <section class="foo">
    </section>
    <section class="bar">
    </section>

</body>
</html>

Can you guys replicate this, and if so, do you have any thoughts on preventing it?

Upvotes: 3

Views: 959

Answers (2)

Geek Devigner
Geek Devigner

Reputation: 369

Looks like someone logged a bug already for the HTML continued overflow bug. I've seen 1 other issue like this too, where you could keep scrolling up, where scroll-snap-points weren't used. So I don't think they're the issue.

I was able to put scroll-snap-type on body, which fixed the demo for me. Chrome 87.

body {
  scroll-snap-type: y mandatory;
}

Try again?

My 2 cents / thoughts:
I don't think it's a good idea to put scroll snap on the html tag. I usually end up extracting my body scroll-snap prototypes into a <main> or something, and make it more of a component than a document style.

Upvotes: 2

sminton
sminton

Reputation: 261

I still haven't ascertained whether this is a bug with chrome or not, but the fix is to manage the overscroll behaviour (which can be done in Chrome) https://developers.google.com/web/updates/2017/11/overscroll-behavior

body {
    overscroll-behavior-y: none;
}

Does the job. With thanks to /u/Anemina on reddit. https://old.reddit.com/r/css/comments/i9kkiw/scroll_snap_bug_chrome_on_mac/

Upvotes: 6

Related Questions