<div class="container" tabindex="0">
  <div>
    <div class="game">
      <div class="mario"></div>
    </div>
  </div>
</div>

.container {
  max-width: 400px;
  height: 250px;
  margin: auto;
  border: 5px solid;
  overflow: auto;
  scrollbar-width: none;
}
.container > div {
  width: 200%;
  height: 200%;
}

.game {
  max-width: 300px;
  height: 200px;
  position: sticky;
  top: 10px;
  left: 40px;
  border: 5px solid;
  background: #6185f8;
}
.mario {
  width: 60px;
  aspect-ratio: 1;
  position: relative;
  top: 0%;
  left: 0%;
  background: url(https://assets.codepen.io/1480814/mm.png) center/cover;
  animation: x linear,y linear;
  animation-timeline: scroll(nearest inline),scroll(nearest block);
}
@keyframes x{to {left: calc(100% - 60px)}}
@keyframes y{to {top: calc(100% - 60px)}}