我正在研究一个基于大图像 (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>找到了方法。这并不像我想象的那么困难。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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句