1

Scroll Snap is working in Safari but not in Chrome, also it is not working in Firefox. Whether touchpad or mouse is recognized in both browsers. What is wrong in my CSS?

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

    margin: 0;
}

.section {
    scroll-snap-align: center;
    width: 100%;
    height: 100vh;
}

.colorRed {
    background-color: red;
}
.colorGreen {
    background-color: green;
}
.colorBlue {
    background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="section colorRed">1</div>
    <div class="section colorBlue">1</div>
    <div class="section colorGreen">1</div>
</body>
</html>
dixone
  • 39
  • 4
  • The first place you should go when something doesn't work like you think it should is [caniuse.com](https://caniuse.com/mdn-css_properties_scroll-snap-type). In this case, it notes issues Firefox has on macOS. – Heretic Monkey Aug 04 '22 at 02:58

1 Answers1

3

For Chrome/Firefox to support scroll snap to direct descendants of body, set scroll-snap-type on the html element rather than the body element. Safari is more tolerant.

html {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    margin: 0;
}

I can not found a spec or documentation on this issue, but it is covered in Practical CSS scroll snapping. At the time of writing, Chrome, Safari, and Firefox all support scroll-snap-type on the html element.

Baoshan Sheng
  • 2,635
  • 1
  • 11
  • 11
  • This answer would be better if it linked to a source for the assertion about Chrome/Firefox's scroll snap support. – Heretic Monkey Aug 04 '22 at 02:59
  • OK thanks, this makes it better to work with. But, i found out, that my mouse (MX Master III) i use, does not support well the scroll snap in Firefox, but with touchpad it works fine. Thats weird. – dixone Aug 11 '22 at 21:51