JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div class="lock">1</div>
        <div class="lock">2</div>
        <div class="lock">3</div>
        <div class="lock">4</div>
        <div class="lock">5</div>
        <div class="lock">6</div>
        <div class="lock">7</div>
        <div class="lock">8</div>

CSS

.lock {
                border: 2px solid black;
                height: 200px;
            }

JavaScript

var bestPos = null;
                $(document).on("scroll", function () {
                    var bestOffset = 5000;
                    var pos = $(document).scrollTop();
                    $(".lock").each(function () {
                        offset = Math.abs($(this).offset().top - pos);
                        console.log("scrollpos=" + pos + " elepos=" + $(this).offset().top + "offset=" + offset)
                        if (offset < bestOffset && offset < $(this).height() / 2) {
                            bestOffset = offset;
                            bestPos = $(this).offset().top;
                        }
                    });
                    console.log("bestpos=" + bestPos);
                });
                $(document).on("mouseup", function () {
                    if (bestPos) {
                        //$(document).scrollTop(bestPos);
                        console.log("animate");
                      $('html,body').stop().animate({scrollTop: bestPos}, 1000);
                        bestPos = null;
                    }
                });