4

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?

AstroCB
  • 12,337
  • 20
  • 57
  • 73
hobenni
  • 43
  • 1
  • 3

2 Answers2

5

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.

Community
  • 1
  • 1
Stano
  • 8,749
  • 6
  • 30
  • 44
  • Thanks, I am glad it helped ;-) And also updated the answer, so now it works better also with scrollbars. Greetings – Stano Jun 24 '13 at 14:27
  • $('html,body').stop().animate({ scrollTop: divs.eq(div).offset().top }, 200);,in this code am getting top is undefined or null reference,could u help me? – soundhiraraj Jan 21 '15 at 05:11
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..

harpax
  • 5,986
  • 5
  • 35
  • 49
  • If I use the first Plugin, can i Just Say DeltaY = 100% or how should i do this? If got absolutely no Idea how this should work :/ – hobenni Jun 24 '13 at 11:54
  • @BenniHofstätter I agree with harpax, with this full screen layout you will probably have the problem to fit the content on a smaller screen, when you want to scroll a full page with mouse. – Stano Jun 24 '13 at 12:00
  • 1
    @Stano The Layout will be Responsive when I'm done, so that shouldn't be a problem – hobenni Jun 24 '13 at 13:30
  • @harpax: Thx a lot, I'll test this as soon as possible :) – hobenni Jun 24 '13 at 13:31