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

但这只是一个盲目的猜测。我尝试了其他具有乘法和除法以及比例因子的公式，但没有任何效果。有什么想法吗？

这是working example显示我的意思。最初你只看到绿色div。调整窗口大小，将显示其他两个div，而我希望只看到绿色窗口。

编辑：类似于我的问题非常有趣，但在我看来也非常不同。主要的巨大差异是我正在调整大小并移动位于视口之外的DOM元素。此外，答案非常注重图像/背景宽高比，这是问题的一部分，但对我来说并非如此。我没有调整元素大小的问题，只是因为调整大小而补偿了移动

更新：我编辑了笔，我认为我越来越接近理想的结果：http://codepen.io/anon/pen/vGeRgJ 它似乎有点工作，但它并不特别是当我接近一个极端时，例如左边或右边的所有极端。

Answer 1

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

由于jQuery默认情况下不会调整resize事件，所以我用普通的javascript制作了这个。

为了摆脱垂直滚动，我还添加了getScrollbarSize函数作为奖励：）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何移动内容以及窗口调整大小以使其显示在相同位置？

1 个答案: