JSFiddle - React, Tailwind, and code Playground

by upsuper

HTML

<div id="wrapper">
  <canvas id="canvas" width="200" height="200"></canvas>
  <div id="inner"></div>
</div>

CSS

#wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: auto;
  background: white;
}

#inner {
  width: 2000px;
  height: 2000px;
}

#canvas {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.strokeStyle = 'blue';
ctx.font = '50px';
wrapper.addEventListener('scroll', () => {
	ctx.clearRect(0, 0, 200, 200);
  const width = wrapper.scrollLeft / 10;
  const height = wrapper.scrollTop / 10;
  ctx.fillRect(0, 0, width, height);
  ctx.strokeText(`${width}x${height}`, 0, 50);
});