<div class="block">
  <div class="content"></div>
</div>

.block {
  width: 50%;
  height: 250px;
  overflow: auto;
}

.content {
  background: url("https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1027&q=80") no-repeat center / cover;
  width: 200%;
  height: 600px;
}

const block = document.querySelector('.block');

block.addEventListener('mousemove', (e) => {
  const t = e.currentTarget;
  const xx = Math.min(1, e.clientX / t.clientWidth);
  const yy = Math.min(1, e.clientY / t.clientHeight);
  block.scrollLeft = (t.scrollWidth - t.clientWidth) * xx;
  block.scrollTop = (t.scrollHeight - t.clientHeight) * yy;
});