JSFiddle - React, Tailwind, and code Playground

by shaunxcode

HTML

<div class="body-viewport">
<div class="parallaxing-viewport">
    <div class="slide slide-1">Slide 1</div>
    <div class="slide slide-2">Slide 2</div>
    <div class="slide slide-3">Slide 3</div>
    <div class="slide slide-4">Slide 4</div>
    <div class="slide slide-5">Slide 5</div>
    <div class="slide slide-6">Slide 6</div>
</div>
</div>

CSS

.slide {
    width: 50px;
    height: 50px;
    padding: 100px;
    background: gray;
    margin-bottom: 50px;
    color: white;
}

.slide:last-child { margin-bottom: 0; }

.parallaxing-viewport {
    width: 250px;
    height: 250px;
    overflow-y: scroll;
}

JavaScript

$(function() {
    var snapPositions = [];
    $(".slide").each(function(){
       snapPositions.push(this.offsetTop);
    });

    var $viewport = $(".parallaxing-viewport");
    var prevScroll = 0;
    $('.parallaxing-viewport').scroll(function() {
        var curTop = $(this).scrollTop();
        var downScroll = prevScroll < curTop;
        if(downScroll) {
          snapPositions.forEach(function(pos) {
            if(curTop >= (pos - 60) && curTop < (pos - 40)) {
                $viewport.animate({scrollTop: pos}, 'fast');
            }
          });
        }
        prevScroll = curTop;
    });
});