gpt4 book ai didi

javascript - 如何随着窗口调整大小移动内容,使其出现在同一位置?

转载 作者:行者123 更新时间:2023-11-28 01:14:19 24 4
gpt4 key购买 nike

我有一个包含三个 div 元素的网格的页面。此 div 中的每一个都具有视口(viewport)的大小,因此在任何时候只有一个 div(如果可见)而另外两个在外部。所以网格是视口(viewport)的三倍大。

调整窗口大小会导致 div 和网格也调整大小。

html 非常简单:

<div class="container">
<div class="square square1">1</div>
<div class="square square2">2</div>
<div class="square square3">3</div>
</div>

样式如下:

body {
margin: 0;
padding: 0;
}

.container {
position: relative;
height: 100vh;
width: 300vw;
}

.square {
height: 100vh;
position: absolute;
width: 100vw;
}
.square1 {
background: red;
left: 0;
}

.square2 {
background: green;
left: 100vw;
}

.square3 {
background: yellow;
left: 200vw;
}

通过javascript设置的初始位置在中间div

发生的事情是,调整窗口大小会使整个文档随着调整大小而按比例移动。所以,如果在某个时候我只看到第二个 div,调整窗口大小将使第三个出现得越来越多。我很确定使用一些 javascript 我可以移动网格,使其在调整大小时看起来是固定的,但我想不出一个公式。

我试过这样的:

var windowW = $(window).width();
$(window).resize(function() {
var newWidth = $(window).width();
var diff = windowW - newWidth;

var windowLeftPos = $(window).scrollLeft();
$(window).scrollLeft(windowLeftPos - diff / 2);
});

但这只是盲目猜测。我尝试了其他带有乘除法和比例因子的公式,但没有任何效果。有什么想法吗?

这是一个 working example表明我的意思。最初你只看到绿色的 div。调整窗口大小,将出现另外两个 div 中的一个,但我只想看到绿色的。


编辑:与我类似的问题很有趣,但在我看来也很不一样。主要的巨大区别是我正在调整和移动留在视口(viewport)之外的 DOM 元素。此外,答案非常关注图像/背景纵横比,这是问题的一部分,但对我而言并非如此。调整元素大小没有问题,只是补偿由于调整大小引起的移动


更新:我编辑了笔,我认为我越来越接近期望的结果:http://codepen.io/anon/pen/vGeRgJ这似乎有点管用,但尤其是当我更接近极端之一时,比如所有的人都在左边或右边。

最佳答案

这是为您准备的更新版本,您可以从中轻松进行自己的调整。

由于默认情况下 jQuery 不会限制调整大小事件,因此我使用纯 javascript 制作了这个。

为了摆脱垂直滚动,我还添加了一个 getScrollbarSize 函数作为奖励:)

function getWidth() { return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; }
function getLeft() { return document.body.scrollLeft; }
function setLeft(v) { document.body.scrollLeft = v; }
function getScrollbarSize() {
var div, width;
div = document.createElement('div');
div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
div = div.firstChild;
document.body.appendChild(div);
width = div.offsetWidth - div.clientWidth;
document.body.removeChild(div);
return width;
};

(function(t,w,l,l2) {

document.querySelector('.container').style.height = 'calc(100vh - ' + getScrollbarSize() + 'px)';

w = getWidth(), l = w, l2 = l / w, setLeft(w);

window.addEventListener("resize", function(e) {
if ( !t ) {
t = setTimeout(function() {
t = null;
resizeHandler(e);
}, 66); /* throttle timeout */
}
}, false);

function resizeHandler(e) {
w = getWidth();
l = getLeft();
setLeft(w * l2);
}

window.addEventListener("scroll", function(e) {
if ( !t ) {
l2 = getLeft() / w;
}
}, false);

}());
body {
margin: 0;
padding: 0;
}

.container {
position: relative;
height: 100vh;
width: 100vw;
}

.square {
height: 100%;
position: absolute;
width: 100vw;
}
.square1 {
background: red;
left: 0;
}

.square2 {
background: green;
left: 100%;
}

.square3 {
background: yellow;
left: 200%;
}
<div class="container">
<div class="square square1">1</div>
<div class="square square2">2</div>
<div class="square square3">3</div>
</div>

关于javascript - 如何随着窗口调整大小移动内容,使其出现在同一位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36372628/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com