Question

给出以下标记：

{"posts":[{"post":{"math_score":"85","history_score":"70"}}]}

风格：

<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和$('.container').scrollLeft(X)到中心$('.container').scrollTop(X)？

我通过玩静态值来实现它，但是一旦屏幕尺寸发生变化，例如在手机或平板电脑上，然后关闭中心。

我也尝试过：

.target

但这似乎不起作用，中心很远。我没有＆＃39;知道这是因为$('.container').scrollLeft($('.target').position().left); $('.container').scrollTop($('.target').position().top);包含在.target的div中。

Answer 1

我希望我能正确理解你。我已将position: relative;添加到.inner元素和absolute到.target元素，并根据元素width＆＃计算了jQuery中的位置39; s和height＆＃39; s。我希望这就是你所需要的：

＆＃13;

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
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

获取元素相对于父div Jquery的x位置

1 个答案: