JQuery: ScrollTo next div with mouse wheel after reaching the end of the current div

Question

I am trying to create a website from divs that act like pages. Thus, there are several divs with a minimum height of 100% of the browser window on top of each other. I am trying to make navigation so that the user can scroll the next div with the mouse wheel. I found this useful piece of code:

http://jsfiddle.net/Mottie/Vk7gB/

$('#nav').onePageNav(); var $current, flag = false; $('body').mousewheel(function(event, delta) { if (flag) { return false; } $current = $('div.current'); if (delta > 0) { $prev = $current.prev(); if ($prev.length) { flag = true; $('body').scrollTo($prev, 1000, { onAfter : function(){ flag = false; } }); $current.removeClass('current'); $prev.addClass('current'); } } else { $next = $current.next(); if ($next.length) { flag = true; $('body').scrollTo($next, 1000, { onAfter : function(){ flag = false; } }); $current.removeClass('current'); $next.addClass('current'); } } event.preventDefault(); }); 

But you can see that there is a problem when the content is longer than the browser window. I would like it to work so that if the current div is larger than the scroll of the browser window, it works fine, but it should stop at the bottom of the div and then next time scroll all the way to the next div. Is there any way to do this?

I hope this makes sense.

Thanks,

-Mikkå

Answer 1

http://jsfiddle.net/Vk7gB/261/

Not a ready-made solution, but it will put you on the right track.

 $('#nav').onePageNav(); var $current, flag = false, b = $('body'); b.mousewheel(function(event, delta) { if (flag) { return false; } $current = $('div.current'); var $next; if (delta > 0) $next = $current.prev(); else $next = $current.next(); var scrollTop = b.scrollTop(); var elHeight = $current.height(); var nextOffset = $next.offset().top; var avHeight = screen.availHeight; console.log(scrollTop, nextOffset, elHeight, avHeight); if(scrollTop + elHeight - avHeight < nextOffset){ return true; } if ($next.length) { flag = true; $next.scrollTop(); $('body').scrollTo($next, 1000, { onAfter : function(){ flag = false; } }); $current.removeClass('current'); $next.addClass('current'); } event.preventDefault(); return false; }); 

Answer 2

in this article you can find a similar solution that I prefer to use instead of your idea

you can define sections, and I suggest you, if possible, make your pages browser-friendly

this is a github js library you can use

this is an online demo that is understandable and transparent to you.