JSFiddle - React, Tailwind, and code Playground

by mahdiar_mansouri

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
 
</body>
</html>

CSS

body{
  height: 3000px;
  width: 3000px;
}

JavaScript

var arrowHeight = 25;

var viewportHeight = window.innerHeight;
var viewportWidth = window.innerWidth;

var contentHeight = getComputedStyle(document.body).height;
var contentWidth = getComputedStyle(document.body).width;

contentHeight = parseFloat(contentHeight);
contentWidth = parseFloat(contentWidth);

var viewableRatioY = viewportHeight / contentHeight;
var viewableRatioX = viewportWidth / contentWidth;

var scrollBarAreaY = viewportHeight - arrowHeight * 2; 
var scrollBarAreaX = viewportWidth - arrowHeight * 2; 

var thumbYHeight = scrollBarAreaY * viewableRatioY; 
var thumbXWidth = scrollBarAreaX * viewableRatioX; 

var scrollYAmount = (contentHeight / 2) - thumbYHeight;
var scrollXAmount = (contentWidth / 2) - thumbXWidth;

window.scroll({
	top: scrollYAmount,
  left: scrollXAmount,
  behavior: 'smooth'
})