JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<div class="contents">
    <div class="box">
        <div class="item">01</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque modi nostrum similique voluptate nulla fugiat veniam pariatur error numquam deleniti asperiores maxime ex repellendus corrupti, voluptatem unde temporibus! Illo, perspiciatis?
        Nobis cumque quia reiciendis consectetur asperiores laborum blanditiis accusamus et alias labore, tenetur excepturi sapiente. Nobis iure praesentium rerum, iste dolorum natus reprehenderit qui. Harum aut ex blanditiis rem magni.
        Rerum amet voluptatem qui incidunt culpa, recusandae commodi doloremque ex id. Consequuntur culpa harum consequatur ex, laborum esse iusto voluptate quisquam fugit iure similique aspernatur deleniti repellendus fugiat porro sequi.
    </div>
    <div class="box">
        <div class="item">02</div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam quaerat ipsa asperiores assumenda rem molestias nisi mollitia doloremque ipsum iste officia iure, reprehenderit qui eveniet aperiam id possimus officiis nulla.
        Ab a recusandae in illum aut delectus repellat perspiciatis autem iusto, expedita neque eos animi dolorem sunt harum inventore? Distinctio ex dolor consequatur debitis corporis, iure labore quasi modi quibusdam!
        Dicta rerum deleniti quod dolores quasi quaerat quas temporibus asperiores provident eligendi laboriosam ullam, explicabo nostrum architecto voluptate porro. Expedita ad unde provident distinctio saepe ut similique vitae natus est?
        Ullam deleniti, nihil quia voluptas veritatis alias exercitationem, in necessitatibus doloribus voluptatibus nisi dolores, voluptate rem provident? Rerum debitis iure quos fugit illum culpa, recusandae tempore reprehenderit voluptatem hic ab.
        Ullam cupiditate perspiciatis tempore excepturi ea quidem necessitatibus quo, totam provident quas autem reprehenderit suscipit! Rerum, assumenda id quos, iste quas...

SCSS

.contents {
            width: 300px;
        }
        .box  {
            position: relative;
            min-height: 400px;
            font-size: 20px;
        }

        .item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 200px;
            margin: 10px;
            line-height: 200px;
            text-align: center;
            background: #000;
            transition: .1s top;
            color: #fff;
        }

JavaScript

var scrTour = function(e, opt) {
    var _this = this;
    var ctr = [];
    var scr = {};
    scr.scrollY = Math.abs(window.scrollY);
    opt = opt === undefined?{}:opt;
    var idx = opt.idx === undefined?0:opt.idx;
    var currentIdx = opt.currentIdx === undefined?0:opt.currentIdx;
    var wrap = document.querySelectorAll(e);
    var i = wrap.length;
    if(1 === 0){return false};
    this.ele = function() {
        var _fnChild = function(e) {
            var a = e.querySelectorAll(opt.box);
            var b = e.querySelectorAll(opt.item);
            if(a.length !== b.length) {
                return false;
            };
            var j = a.length;
            var _ctr = [];
            for(var k = 0; k < j; k++) {
                var __ctr = {
                    // box: a[k],
                    boxTop: a[k].offsetTop,
                    // boxHeight: a[k].offsetHeight,
                    // boxBottom: a[k].offsetTop + a[k].offsetHeight,
                    item: b[k],
                    itemTop: b[k].offsetTop,
                    itemMaxTop: a[k].offsetHeight - b[k].offsetTop - b[k].offsetHeight,
                    itemAbsTop: a[k].offsetTop + b[k].offsetTop,
                    itemAbsMaxTop: a[k].offsetTop + a[k].offsetHeight - b[k].offsetHeight - b[k].offsetTop * 2,
                    // itemHeight: b[k].offsetHeight,
                    // itemBottom: b[k].offsetTop + b[k].offsetHeight
                };
                _ctr.push(__ctr);
            }

            return _ctr;
        }
        
        for(var k = 0; k < i; k++) {
            var _ctr = {
                wrap: wrap[k],
                wrapTop: wrap[k].offsetTop,
                wrapHeight: wrap[k].offsetHeight,
                wrapBottom: wrap[k].offsetTop + wrap[k].offsetHeight
            };
            var _child = _fnChild(_ctr.wrap);
            _ctr.child = _child;
            ctr.push(_ctr);
        }
    }
    var fnScroll = function() {
        scr.scrollY =...