JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<p class="dddd">
스크롤을 내려주세요
</p>
<div class="contents">
  <!-- <div class="box aaaa">
                <div class="item">02321</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">01</div>
    <div class="totalItem">02321</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...

SCSS

.dddd {
    height: 900px;
}

.contents {
    position: relative;
    width: 300px;
    margin: auto;
}

.box {
    position: relative;
    min-height: 400px;
    font-size: 20px;
    border: 1px solid;
    @for $i from 1 through 10 {
      &:nth-child(#{$i}){
        .item {
          $height: random(300) + px;
          height: $height;
          line-height: $height;
        }

      }
    }
}

.box.aaaa {
    position: absolute;
    left: 100%;
    width: 100px;
    height: 9999px;
}

.item {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    min-height: 50px;
    margin: 10px;
    text-align: center;
    background: #000;
    //transition: .1s top ease-out;
    color: #fff;
}

.totalItem {
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 200px;
    margin: 10px;
    line-height: 200px;
    text-align: center;
    background: #000;
    //transition: .1s top ease-out;
    color: #fff;
    $height: random(300) + px;
    height: $height;
    line-height: $height;
}

JavaScript

/*
  scrollMultiItem v0.2.1
  http:/github.com/uiwwnw/scrollMultiItem/
  copyright uiwwnw
*/
var scrollMultiItem = function(e, opt) {
  var _this = this;
  var ctr = [];
  var scr = {};
  scr.scrollY = window.scrollY;
  opt = opt === undefined ? {} : opt;
  opt.performance = opt.performance === undefined ? 1 : opt.performance;
  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 (i === 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 _boxTop = a[k].offsetTop;
        var _boxHeight = a[k].offsetHeight;
        var _item = b[k];
        var _itemTop = _item.offsetTop;
        var _itemHeight = _item.offsetHeight;
        var _itemMaxTop = _boxHeight - (_itemTop * 2) - _itemHeight;
        var _itemAbsTop = _boxTop + _itemTop;
        var _itemAbsMaxTop = _boxTop + _boxHeight - _itemHeight - _itemTop * 2;
        var _itemAbsBottom = _boxTop + _boxHeight;
        var __ctr = {
          // box: a[k],
          boxTop: _boxTop,
          // boxHeight: a[k].offsetHeight,
          // boxBottom: a[k].offsetTop + a[k].offsetHeight,
          item: _item,
          itemTop: _itemTop,
          itemHeight: _itemHeight,
          itemMaxTop: _itemMaxTop,
          itemAbsTop: _itemAbsTop,
          itemAbsMaxTop: _itemAbsMaxTop,
          itemAbsBottom: _itemAbsBottom
          // itemBottom: b[k].offsetTop + b[k].offsetHeight
        };
        _ctr.push(__ctr);
      }

      return _ctr;
    }

    for (var k = 0; k < i; k++) {
      var _wrap = wrap[k];
      var _wrapTop = _wrap.offsetTop;
      var _wrapHeight = _wrap.offsetHeight;
      var _wrapBottom...