Mouse scroll - snap to divs

Question

I currently have a page in the form of

<div id="content">
    <div id="content-page-1">
    <!--content-->
    </div>
    <div id="content-page-2">
    <!--content-->
    </div>
</div>

Is there any way to make scrolling either

1. Stick/snap to divs (these are 100% height and 100% width of the display area)
2. Auto-scroll to next div when scrolling detected

with jquery?

Answer 1

If you listen for the scroll event on your node, you could easily use a plugin like scrollTo to smooth scroll to the "next div" or previous div (however you define that).

var prevScrollTop = 0;
var $scrollDiv    = $('div#content');
var $currentDiv   = $scrollDiv.children('div:first-child');
$scrollDiv.scroll(function(eventObj)
{
    var curScrollTop = $scrollDiv.scrollTop();
    if (prevScrollTop < curScrollTop)
    {
    // Scrolling down:
        $currentDiv = $currentDiv.next().scrollTo();
    }
    else if (prevScrollTop > curScrollTop)
    {
    // Scrolling up:
        $currentDiv = $currentDiv.prev().scrollTo(); 
    }
    prevScrollTop = curScrollTop;
});