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

Question

我有一个包含三个 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这似乎有点管用，但尤其是当我更接近极端之一时，比如所有的人都在左边或右边。

Answer 1

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

由于默认情况下 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>