基于视口而不是容器固定大小的居中滚动

Question

我正在处理一个基于大图像 (7000 X 5321) 的项目。图像将像一张巨大的地图。在此地图的中心，用户将拥有主要兴趣点，因此我的目标是，一旦页面加载，该点需要位于视口的中心，用户将从那里水平或垂直滚动。

我的问题是，虽然我可以使用我的脚本调整滚动位置，但我需要此页面响应，因此需要根据 window 视口而不是基于图像的大小，不知道是否可以这样做。

在下面的代码片段中，您可以看到我的实际代码和我的问题。我在容器内居中放置了一个红色方块。如果您在全景屏幕上查看整页的片段，该点会像我希望的那样居中（或多或少），但如果 window 宽度或高度发生变化（如您在小 window)

如果我能提供任何帮助或想法，我们将不胜感激。

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

Answer 1

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

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

Answer 2

找到方法了。这并不像我想象的那么困难。 Diego Cesar 给了我需要的提示。

$(document).ready(function() {
 $(window).resize(function () {
    var viewportWidth = $(window).innerWidth();
    var viewportHeight = $(window).innerHeight();

    $('html, body').animate({
      scrollTop: ($('body').height() / 2 - viewportHeight / 2)
    }, 0);
    $('html, body').animate({
      scrollLeft: ($('body').width() / 2 - viewportWidth / 2 )
    }, 0);
  }).resize();
});

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>

基于视口而不是容器固定大小的居中滚动

Center scroll based on viewport insteed of container fixed sized

html

javascript

jquery

responsive