JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<!-- <div class="wrapper"> -->
  <span class="scroll-fake-content">
    <div class="content">
      <div id="dragme"></div>
    </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;
}

#dragme {
  
  background: red;
  width: 100px;
  height: 100px;
}

JavaScript

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

(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,
    };
  }

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

    this.init(Data);
  };


  function getCenter($element, sizeData) {
    var width = sizeData ? sizeData.width : $element.width(),
      height = sizeData ? sizeData.height : $element.height();

    return {
      x: width / 2,
      y: height / 2,
    };
  }

  InfiniteSpace.prototype.centerContent = function () {
    var fakeContentCenter = getCenter(this.$fakeContent, this.fakeContentSize),
        contentWidth = this.contentSize ? this.contentSize.width : this.$content.width(),
        contentHeight = this.contentSize ? this.contentSize.height : this.$content.height(),
        left = fakeContentCenter.x - contentWidth / 2,
        top = fakeContentCenter.y - contentHeight / 2;

		if(this.fakeContentSize){
    	this.$fakeContent.css({
      	width: this.fakeContentSize.width,
        height: this.fakeContentSize.height
      });
    }

    this.$content.css({
      left: left,
      top: top,
      width: contentWidth,
      height: contentHeight
    });
  };

 ...