JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="container">
    <div id="draggable"></div>
  </div>
</div>

CSS

.container {
  width: 5000px;
  height: 5000px;
  background: green;
}

.outer {
  width: 200px;
  height: 200px;
  overflow: scroll;
}

#draggable {
  width: 20px;
  height: 20px;
  background: blue;
  position: absolute;
}

JavaScript

const element = document.body.querySelector('#draggable');

const isInContainer = (x,y) => {
	const elements = document.elementsFromPoint(x, y)
  
  return elements.find(el => el && el.classList && el.classList.contains('container')) || false;
}

const onMouseMove = (e) => {
	if(isInContainer(e.pageX, e.pageY)){
 
    element.style.top = e.pageY + 'px';
    element.style.left = e.pageX + 'px';
  }
}

const onMouseUp = () => {
   document.removeEventListener('mousemove', onMouseMove);
   document.removeEventListener('mouseup', onMouseUp)
}

element.addEventListener('mousedown', (e) => {
	e.preventDefault();
   
   document.addEventListener('mousemove', onMouseMove);
   document.addEventListener('mouseup', onMouseUp)
});