Apple-like website section-by-section scrolling behavior

Question

I'm trying to figure out how to make the main visible content area expand to the height of the browser-- it's responsive in a sense. If you extend the browser, more of the content shows. If you scroll down, it scrolls to the next div and repeats the behavior.

I have no idea what this behavior is called or referred to as, so I'm not sure I can give an accurate title.

My guess is that this is done with Javascript, but I'm not well-versed in the language by any means. Can someone help me out here?

Examples: http://theartofraw.g-star.com & http://www.apple.com/iphone-5s/

Answer 1

I've done this with Jquery. Basically you get the height of the window and then set the height of each slide to that value.

var origheight = $(".slide").height();
var height = $(window).height();

if (height > origheight) {
    $(".slide").height(height);
}

http://jsfiddle.net/uYXvF/

Answer 2

They have sections, that are CSS "height: 100%";

Then they detect scrolling and, do a CSS3 Transform with CSS3 Transition:

1. Transform: Y: 0%
2. Scrolling Detected
3. Transform: Y: 100%

So they are basically preventing actual scrolling and instead move the whole content by 100%.

Edit (2): In this post they show how to disable scrolling: How to disable scrolling temporarily?

function wheel(e) {
  preventDefault(e);
  document.getElementById("mainContainer").style.webkitTransition = "-webkit-transform 1s";
  document.getElementById("mainContainer").style.webkitTransform = "translateY(-100%)";
}

This is a simplified version from what i use on my own page.

Answer 3

如果要完成与发布的示例站点中相同的功能，则可以使用一个名为fullPage.js的jQuery插件。