Question

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

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

在下面的代码段中，您可以看到我的实际代码和问题。我把一个红色的正方形放在容器里面。如果您在全景屏幕中检查整页的片段，则按照我的意愿对点进行居中（或多或少）但如果窗口宽度或高度发生变化则无法工作（如您在小窗口中看到的那样））

我可以提供的任何帮助或想法都会受到很大的影响。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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给了我需要的暗示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

中心滚动基于视口输入固定容器固定大小

2 个答案: