4

I'm trying to build site from divs that act kinda like pages. So there are multiple divs with min-height of 100% of browser window on top of each other. I'm trying to make navigation work so that user can scroll to next div with 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 problem when content is longer than the browser window. I would like it to work so that if current div is longer than browser window scrolling works normally, 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 make this happen?

I hope that this makes some sense..

Thanks,

-Mikkå

Mikkå
  • 71
  • 2
  • Just a comment, I would find that incredibly annoying as a user. Never hijack a users controls to make them act like they shouldn't in my opinion. – Rick Calder Apr 07 '13 at 15:21
  • Usually I agree with you, but this time the whole concept is going to be a bit something other than ordinary website. I would like to have some more control to the user-experience. But thanks, still. – Mikkå Apr 07 '13 at 15:56

2 Answers2

0

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

Not a finished solution but it will put you on the right path.

$('#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;
});
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
0

in this article you can find similar solution that i prefer to use that instead of yours idea

you can define sections and i suggest you if possible make your pages fit to browser autocratically

this is github js library that you can use it

this is an online demo that clear and transparent for you

Community
  • 1
  • 1
saber tabatabaee yazdi
  • 4,404
  • 3
  • 42
  • 58