How to Make Section Auto-Snap When Scrolling with CSS

Auto snap when scrolling is a feature that helps to keep certain sections on the screen in a specific position when the user scrolls near it. This can be especially helpful for keeping the content of a section stays in view.

The scroll-snap-type CSS property is used to determine how sections should snap to the screen. If you want to make a section auto-snap when scrolling with CSS, you can use the following code:

<div class="wrapper">
  <div class="section section-welcome">
    Welcome
  </div>

  <div class="section section-services">
    Our Services
  </div>

  <div class="section section-testimonials">
    Testimonials
  </div>

  <div class="section section-contact">
    Contact
  </div>
</div>

<style type="text/css">



.wrapper {
  font-family: sans-serif;
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.section {
  scroll-snap-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #b71c1c;
  color: #fff;
  font-size: 64px;
}

.section-welcome{
  background-color: #b71c1c;
}
.section-services{
  background-color: #880e4f;
}
.section-testimonials{
  background-color: #e65100;
}
.section-contact{
  background-color: #4a148c;
}

</style>