JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<!-- <div class="wrapper"> -->
  <span class="scroll-fake-content">
    <div class="content"></div>
  </span>
<!-- </div> -->

CSS

.wrapper {
  posit/* ion: relative;
  overflow: scroll;
  box-s */izing: border-box;
}

.scroll-fake-content{
  position: relative;
  display: block;
}

.content{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* Custom Styles */
body{
  margin: 0;
  padding: 0;
  background: silver;
  overflow: scroll;
  position: relative;
}

.wrapper{
  background: white;
  border: solid 1px black;
  width: 80vw;
  height: 70vh;
  margin: 10vh 10vw;
}

.scroll-fake-content{
  width: 400vw;
  height: 400vh;
}

.content{
  width: 80vw;
  height: 70vh;
  background: lightblue;
}

JavaScript

(function ($) {
  "use strict";

  function getScrollCenters(element) {
    var isBody = element.tagName === "BODY";
    return {
      x: element.scrollWidth / 2 - $(isBody ? window : element).width() / 2,
      y: element.scrollHeight / 2 - $(isBody ? window : element).height() / 2,
    };
  }

  function throttle(fn, wait) {
    var time = Date.now();
    return function () {
      if (time + wait - Date.now() < 0) {
        fn();
        time = Date.now();
      }
    };
  }

  var InfiniteSpace = function (Data) {
    this.defaultData = {
      wrapper: ".wrapper",
      fakeContent: ".scroll-fake-content",
      content: ".content",
      throttleMs: 10,
      getMaxTop: function () {
        return 10000;
      },
      getMaxLeft: function () {
        return 10000;
      },
      getMaxRight: function () {
        return 10000;
      },
      getMaxBottom: function () {
        return 10000;
      },
    };

    this.init(Data);
  };

  InfiniteSpace.prototype.handleScroll = function () {
  return;
    var newCenters = getScrollCenters(this.wrapper),
      wrapperWidth = this.isBody ? $(window).width() : this.$wrapper.width(),
      wrapperHeight = this.isBody ? $(window).height() : this.$wrapper.height(),
      scrollWrapper = this.isBody ? window : this.wrapper,
      scrollLeft = Math.max(scrollWrapper.scrollLeft || scrollWrapper.scrollX),
      scrollTop = Math.max(scrollWrapper.scrollTop || scrollWrapper.scrollY),
      spacingX = wrapperWidth / 2 + wrapperWidth,
      spacingY = wrapperHeight / 2 + wrapperHeight,
      isNearRightEdge = this.$fakeContent.width() - scrollLeft < spacingX,
      isNearLeftEdge = scrollLeft < spacingX,
      isNearBottomEdge = this.$fakeContent.height() - scrollTop < spacingY,
      isNearTopEdge = scrollTop < spacingY;

    if (isNearRightEdge) {
      this.$fakeContent.width(
        Math.min(
          this.getMaxRight(),
          Math.max(this.$fakeContent.width(), spacingX + scrollLeft)
        )
      );
    }
 ...