javascript - 获取元素相对于父div Jquery的xy位置

Question

给定以下标记:

<div class='container'>
  <div class='inner'>
    <div class='target'></div>
  </div>
</div>

和样式:

.container {
  width: 100%;
  height: 100vh;
  overflow: scroll;
}

.inner {
  width: 3000px;
  height: 2000px;
}

.target {
  height: 200px;
  width: 200px;
  background: red;
}

我将如何使用 $('.container').scrollLeft(X) 和 $('.container') 滚动 .container .scrollTop(X) 将 .target 置于视口(viewport)中间？

我通过玩弄静态值来让它工作，但一旦屏幕大小发生变化，例如在手机或平板电脑上，则居中关闭。

我也尝试过:

$('.container').scrollLeft($('.target').position().left);
$('.container').scrollTop($('.target').position().top);

但这似乎不起作用，居中距离很远。我不知道这是不是因为 .target 包含在一个带有 overflow: scroll 的 div 中。

Answer 1

希望我理解正确。我已将 position: relative; 添加到 .inner 元素并将 absolute 添加到 .target 元素，我计算了基于元素 width 和 height 的 jQuery 位置。我希望这是你需要的:

var x = $('.inner').width() / 2 - $('.target').width() / 2
var y = $('.inner').height() / 2 - $('.target').height() / 2;

$('.container').scrollLeft(x);
$('.container').scrollTop(y);

$('.target').css({
  left: x,
  top: y
});

.container {
  width: 100%;
  height: 100vh;
  overflow: scroll;
}
.inner {
  width: 3000px;
  height: 2000px;
  position: relative;
}
.target {
  height: 200px;
  width: 200px;
  background: red;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='inner'>
    <div class='target'></div>
  </div>
</div>