How to make a window stick?

February 21, 2023

I have some divs that are 100VH and I’m trying to make it where when I scroll just once it will lock on to the next div. EXAMPLE: https://olaolu.dev/ (when you just touch the scroll wheel once it locks on to another part of the page)

>Solution :

The effect you’re referring to is called snap scrolling or scroll snapping. It allows a scrollable container to stop at certain points (in your case, at the next div) after scrolling. You can achieve this with CSS scroll snapping.

Here’s an example implementation:

HTML

<div class="scroll-container">
  <div class="scroll-item">
    <!-- content of first div -->
  </div>
  <div class="scroll-item">
    <!-- content of second div -->
  </div>
  <div class="scroll-item">
    <!-- content of third div -->
  </div>
  <!-- add more scroll items as needed -->
</div>

CSS

.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.scroll-item {
  scroll-snap-align: start;
  height: 100vh;
}

This will make it so that the container will snap to the next item when you scroll, assuming the container is 100vh tall. The scroll-snap-type: y mandatory; property specifies the container should scroll vertically, and scroll-snap-align: start; specifies the container should snap to the top of each item.