Check out example codes for "scroll snap css". It will help you in understanding the concepts better.

Code Example 1

.container {
  scroll-snap-type: mandatory; 

.child {
  scroll-snap-align: start;

/* Guide: */

Code Example 2

/* 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:

Learn ReactJs, React Native from