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>

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close