javascript - 在 Javascript 或 jQuery 中如何滚动以使另一个 div 内的元素垂直和水平居中

Question

我正在尝试使用 jQuery 或 Javascript 自动滚动，以便 .innerElement 在 .wrapper 中垂直和水平居中滚动框。

请注意，可滚动区域必须位于 div 内部，它不能使用窗口视口(viewport)(因为最终版本将具有多个可滚动区域)。

我尝试过这个:

$('.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