How To Scroll down 100% with Mousewheel at once ?

Question

This question already has an answer here:

• Control page scroll animation with mousewheel 2 answers

I'm creating a OnePage for my Portfolio.

Each site fills 100% of the Screen. And I want that when I use the Mouse-wheel to scroll, that one Scroll, scrolls down 100%, so that I come directly to the next site and not somewhere between the pages.

Can someone tell me how I can solve this problem with JS/jQuery?

Answer 1

MouseWheel is not a default event within jQuery, so to start with you would need something like this and either write your own function to switch to the next page or use another plugin like scrollTo

Not quite sure whether or not that is best practice though..

EDIT

Here is a fiddle on the base of Stano's fiddle.

$("body").mousewheel(function(event, delta, deltaX, deltaY) {
    event.preventDefault();
    if (delta > 0 && current_page > 0) {
        current_page = current_page - 1;
        $("body").scrollTo( '#page_'+current_page);  
    } else if (delta < 0 && current_page < 10) {
        current_page = current_page + 1;
        $("body").scrollTo( '#page_'+current_page);
    }
});

and another edit: the fiddle only works in FF as Chrome and IE refuse to load the scripts because of the wrong MIME-Type..

Answer 2

You can also use the following onscroll handler, it's based on this answer:

$(document).ready(function () {
    var divs = $('.mydiv');
    var dir = 'up'; // wheel scroll direction
    var div = 0; // current div
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});

Here is jsfiddle and its separated test page.