How to move content along with window resize so that it appears in the same position?

Question

I have a page with a grid containing three div elements. Each one of this div has the size of the viewport so at any time just one of the divs if visible and the other two are outside. So the grid is three times big the viewport.

Resizing the window will cause the divs, hence the grid, to resize as well.

The html is pretty simple:

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

Styled like this:

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

The initial position, set via javascript, is on the middle div .

What happens is that resizing the window makes the whole document to move proportionally with the resizing. So, if at some point I'm seeing just the second div, resizing the window will make the third to appear more and more. I'm quite sure that with some javascript I could move the grid so that it appears fixed while resizing, but I can't figure out a formula.

I tried something like this:

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

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

But it's just a blind guess. I tried other formulas with multiplication and division and scale factors, but nothing worked. Any idea?

Here's a working example showing what I mean. Initially you see just the green div. Resizing the window, on of the two other divs will appear, instead I would like to see only the green one.

---

Edit: the question similar to mine is very interesting but it seems to me also very different. The main huge difference is that I'm resizing and moving DOM elements that stay outside the viewport. Besides, the answers are pretty focused on the image/background aspect ratio, which is part of the question, but it's not the case for me. I don't have a problem resizing elements, just compensating the movement due to the resizing

---

Update: I edited the pen and I think I'm getting closer to the desired result: http://codepen.io/anon/pen/vGeRgJ It seems to kind of work, but it doesn't especially when I'm closer to one of the extremes, like all on the left or on the right.

Answer 1

Here is an updated version for you, from where you can easily make your own adjustments.

Since jQuery doesn't throttle the resize event by default, I made this one in plain javascript.

To get rid of the vertical scroll, and I also added a getScrollbarSize function as a bonus :)

 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>