How to achieve a scrolling effect similar to the Paragon site

Question

I don't know what this scrolling effect is called so don't know how to search for my answer, and I can't find it in the source code. What is the code responsible for the scrolling effect at Paragon where scrolling will cause the page to scroll down to the next div I assume. Or down a certain height.

Questions asking us to recommend a technique or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow — Paulie_D, Feb 25 '16 at 15:04
The first problem is that instead of repeating the question title which asks "how to do X" you asked for us to point out the code responsible on a third party site. The second problem is that had you asked correctly, it'd be a duplicate: http://stackoverflow.com/questions/12849439/treating-each-div-as-a-page-when-scrolling — BSMP, Feb 25 '16 at 15:21
As I mentioned, I did search for over half an hour for this but didn't know what to search to get the answers — Shniper, Feb 25 '16 at 15:49

score 2 · Accepted Answer · edited May 23 '17 at 12:31

I've thrown together a CodePen. It hase no animations but explains the general mechanics (the Paragon site does it differently but to start the following might be better suited).

The core part is this:

window.onwheel = function ( e ) {
    e.preventDefault();
    var wDelta = e.deltaY > 0 ? 'down' : 'up';
    if (wDelta === "down") {
        // scroll Down
    } else {
        // scroll Up
    }
}

To know where to scroll we'll of course need to know where we are. There are several ways to do that. What I did is check the current top of the viewport against it's height.

var offset = window.pageYOffset,
    viewportHeight = document.documentElement.clientHeight;

switch (parseInt(offset/viewportHeight,0)) {
    case 0:
        // we are in the first viewport
        break;
    case 1:
        // we are in the second viewport
        break;
    ...
}

I just checked it for functionality. Performance wise it can be improved upon. You should also bind keydown (to catch pageUp, pageDown, space and so on) but it can be done in a similar fashion. To ensure backwards compatibility you'll need to expand the code (e.g. a binding to the onmousewheel event). But this will give you a place to start.

PS

Also consider what behaviour you want when reloading the page (if the user reloads while between viewports it will stay between them until another scroll occurs).

This answer could also interest you.

How to achieve a scrolling effect similar to the Paragon site

1 Answers1