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>
For Chrome/Firefox to support scroll snap to direct descendants of
body, setscroll-snap-typeon thehtmlelement rather than thebodyelement. Safari is more tolerant.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-typeon thehtmlelement.