如何在調整窗口大小的同時移動內容，使其出現在相同的位置？

Question

我有一個包含三個div元素的網格的頁面。 每個div都具有視口的大小，因此在任何時候只有一個 div 可見，而另外兩個在外面。 所以網格是視口的三倍大。

調整窗口大小將導致 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);
  });

但這只是一個盲目的猜測。 我嘗試了其他帶有乘法和除法以及比例因子的公式，但沒有任何效果。 任何的想法？

這是一個工作示例，顯示了我的意思。 最初，您只看到綠色的 div。 調整窗口大小，將出現另外兩個 div，而我只想看到綠色的那個。

---

編輯：與我類似的問題非常有趣，但在我看來也非常不同。 主要的巨大差異是我正在調整和移動位於視口之外的 DOM 元素。 此外，答案非常集中在圖像/背景縱橫比上，這是問題的一部分，但對我而言並非如此。 我在調整元素大小時沒有問題，只是補償由於調整大小而引起的移動

---

更新：我編輯了筆，我想我離想要的結果越來越近了： http : //codepen.io/anon/pen/vGeRgJ這似乎有點工作，但它不是特別是當我更接近到極端之一，就像在左邊或右邊一樣。

Answer 1

這是為您准備的更新版本，您可以從中輕松進行自己的調整。

由於 jQuery 默認不限制 resize 事件，所以我用普通的 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>