.parent-container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.child-containers {
height: 100vh;
scroll-snap-align: start;
}.container {
scroll-snap-type: mandatory;
}
.child {
scroll-snap-align: start;
}
/* Guide: https://css-tricks.com/practical-css-scroll-snapping/ *//* Answer to: "scroll snap css" */
/*
CSS Scroll Snap is a module of CSS that introduces scroll snap positions,
which enforce the scroll positions that a scroll container’s scrollport may
end at after a scrolling operation has completed.
Here's two guides on how to use this module:
- https://blog.logrocket.com/how-to-use-css-scroll-snap/
- https://css-tricks.com/practical-css-scroll-snapping/
*/// next.config.js
module.exports = {
compiler: {
// ssr and displayName are configured by default
styledComponents: true,
},
}