0
224
ViewsCSS snap scroll property snaps beginning and end of website
The snap-scroll is working fine when scrolling through divs but the website scrolls beyond the last div as long as you keep scrolling down and vice versa beyond the first div if you keep scrolling up.
Ideally, the website must not continue scrolling beyond the first and last divs and instead should bounce back to the first and last divs.
Here's the codesandbox link. To reproduce the issue, the website needs to be opened in a new window with the extreme right button highlighted below.
Note
Reproducible in Chrome, Brave, Edge, Opera, and not in Safari and Firefox.
Code
<!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>
<style>
html {
scroll-snap-type: y mandatory;
}
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
<script>
const colors = ["red", "green", "blue"];
document.querySelectorAll("div").forEach((div, index) => {
div.style.backgroundColor = colors[index];
});
</script>
</html>
·
Juan Pablo Isaza
Answer question