How To Scroll down 100% with Mousewheel at once ? - jquery [duplicate]

Answer 1

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.

Answer 2

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..