javascript - 根据视口(viewport)而不是容器固定大小的中心滚动

我正在基于大图像（7000 X 5321）进行项目。图像将像一张巨大的地图。在此地图的中心，用户将具有主要的兴趣点，因此我的目标是，一旦页面加载，此点就需要在视口的中心，然后从那里可以水平或垂直滚动​​。

我的问题是，尽管我可以使用脚本调整滚动位置，但我需要此页面能够响应，因此需要根据窗口视口而不是根据图像的大小来调整此点的中心位置，并且不知道是否可以做到的。

在下面的代码段中，您可以看到我的实际代码和问题。我在容器内将红色正方形居中。如果您在全景屏幕的全页上查看代码段，则该点会按照我的意愿居中（或多或少），但是如果窗口的宽度或高度发生变化（如您在小窗口中看到的），该点将不起作用

我可以工作的任何帮助或想法都将不胜感激。

$(document).ready(function() {
  $('html, body').animate({
    scrollTop: ($('body').height() / 2 - 450)
  }, 0);
  $('html, body').animate({
    scrollLeft: ($('body').width() / 2 - 1000)
  }, 0);
});

html,
body {
  margin: 0;
  height: 5321px;
  width: 7000px;
}

.contenedor-mapa {
  height: 5321px;
  width: 7000px;
  position: relative;
  background-color: grey;
}

.center {
  width: 10px;
  height: 10px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="contenedor-mapa">
  <div class="center"></div>
</div>

最佳答案

我不确定如何100％使用jQuery，但是您需要的是：

$('html, body').animate({
    scrollTop: $('body').height() / 2 - window.innerHeight / 2
  }, 0);
  $('html, body').animate({
    scrollLeft: $('body').width() / 2 - window.innerWidth / 2
  }, 0);

关于javascript - 根据视口(viewport)而不是容器固定大小的中心滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45062271/