var scroll = (function () {
function scroll() {
var scrollInner = document.querySelectorAll(".scrollInner")[0],
Thumb = document.querySelectorAll(".scrollbarThumb")[0],
scrollbar = document.querySelectorAll(".scrollbar")[0],
scrollableHeight = scrollInner.clientHeight,
totalHeight = scrollInner.scrollHeight,
barHeight = parseInt((scrollableHeight * scrollableHeight) / totalHeight),
scrollbarTrack = scrollableHeight - barHeight;

var clientRect = scrollbar.getBoundingClientRect();
var py = window.pageYOffset + clientRect.top - scrollableHeight;
this.handling = function () {
Thumb.style.height = barHeight + "px";
var active = false,
scrollbar_thumb_cursor_Y;
scrollInner.addEventListener(
"scroll",
function (e) {
if (active) return;
var y =
(scrollInner.scrollTop * scrollbarTrack) /
(totalHeight - scrollableHeight);
Thumb.style.transform = "translateY(" + y + "px)";
var targetPoint = scrollbarTrack;
},
{ passive: true }
);
scrollbar.addEventListener(
"click",
function (event) {
console.log("click");
event.preventDefault();
active = true;
var calc = event.layerY - barHeight / 2;
scrollbar_thumb_Y = event.layerY;
var elemElem = scrollbar_thumb_Y - barHeight / 2;
var calc =
(totalHeight - scrollableHeight) / (scrollableHeight - barHeight);
var yy = elemElem * calc;
if (elemElem < 0) { elemElem=0; } else if (elemElem> scrollbarTrack) {
  elemElem = scrollbarTrack;
  }
  Thumb.style.transform = "translateY(" + elemElem + "px)";
  scrollInner.scrollTop = yy;
  },
  { passive: false }
  );
  Thumb.addEventListener(
  "mousedown",
  function (event) {
  console.log("mousedown");
  console.log(event);
  active = true;
  // eventSet = event.layerY;
  scrollbar_thumb_cursor_Y =
  event.pageY - this.getBoundingClientRect().top;
  // eventSet - Thumb.getBoundingClientRect().top;
  },
  { passive: true }
  );
  document.addEventListener(
  "mousemove",
  function (event) {
  event.preventDefault();
  if (!active) return;
  event = event.pageY;
  console.log(event);
  var scrollbar_thumb_Y =
  ((event - scrollbar.getBoundingClientRect().top) / scrollbarTrack) *
  scrollbarTrack -
  scrollbar_thumb_cursor_Y;
  var calc =
  (totalHeight - scrollableHeight) / (scrollableHeight - barHeight);
  var yy = scrollbar_thumb_Y * calc;
  if (scrollbar_thumb_Y < 0) { scrollbar_thumb_Y=0; } else if (scrollbar_thumb_Y> scrollbarTrack) {
    scrollbar_thumb_Y = scrollbarTrack;
    }
    Thumb.style.transform = "translateY(" + scrollbar_thumb_Y + "px)";
    scrollInner.scrollTop = yy;
    },
    { passive: false }
    );
    document.addEventListener("mouseup", function (event) {
    console.log("mouseup");
    setTimeout(function () {
    active = false;
    document.body.style.overflow = "";
    event.stopPropagation();
    }, 0);
    });
    document.addEventListener("selectstart", function () {
    if (active) return false;
    });
    };
    this.handling();
    }
    return scroll;
    })();

    window.addEventListener("load", function () {
    new scroll();
    });