В Javascript или jQuery как прокрутить, чтобы элемент внутри другого div был центрирован по вертикали и горизонтали

Question

Я пытаюсь использовать jQuery или Javascript для автоматической прокрутки, чтобы .innerElement центрировался vertically and horizontally в полях прокрутки .wrapper.

Обратите внимание, что область прокрутки имеет чтобы быть внутри div, он не может использовать окно просмотра окна (так как окончательная версия этого будет иметь несколько прокручиваемых областей).

Я пробовал это:

$('.wrapper')
  .scrollTop($('.innerElement').position().top - ($('.wrapper').height() / 2))
  .scrollLeft($('.innerElement').position().left - ($('.wrapper').width() / 2));

body {
  overflow: hidden;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

.inner {
  width: 5000px;
  height: 5000px;
  position: relative;
}

.innerElement {
  width: 20px;
  height: 20px;
  background: #000;
  top: 1400px;
  left: 1300px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="inner">
    <div class="innerElement"></div>
  </div>
</div>

Я не могу на этом обернуться вокруг математики.

Answer 1

Я бы порекомендовал другую формулу для расчета требуемых координат:

For Top offset: (ElementTop - (WrapperHeight / 2) + (ElementHeight / 2))
For Left offset: (ElementLeft - (WrapperWidth / 2) - (ElementWidth / 2))

Также вы можете использовать собственный метод «Прокрутка» для достижения плавного перехода.

Я прилагаю CodePen с концепцией: https://codepen.io/geekzolanos-dev/pen/xxGEmRq