Vertikaler snap scroll

Mit einer Kombination der mousewheel¹ und touchSwipe-Plugins für jQuery lässt sich ein vertikaler Scroll realisieren, der jeweils auf das nächste Element einschnappt.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>

 

<div id="wrap">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
  <div class="section">Section 4</div>
</div>

 

$(document).ready(function() {  
    // visible element
    if(location.hash == ''){
        currentElement = $('.section').eq(0);
    } else {
        currentElement = $(location.hash)
    }

    // disable scroll
    scrollDisabled = false;

    $('body').touchwipe({
        wipeUp: function() {
            gotoPrev();
        },
        wipeDown: function() {
            gotoNext();
        },
        min_move_x: 20,
        min_move_y: 20,
        preventDefaultEvents: true
    });

    $(document).bind('mousewheel', function(event, delta) {
        if(delta > 0){
            gotoPrev('scroll');
        } else {
            gotoNext('scroll');
        }
        return false;
    });

    $(document).keydown(function (event) {

        // handle cursor keys
        if (event.keyCode == 38) {
            // up
            gotoPrev();
        } else if (event.keyCode == 40) {
            // down
            gotoNext();

        }

    });

    function gotoNext(type){
        if(!scrollDisabled && currentElement.next().length == 1) {
            if(type == 'scroll') {
                // disable scroll for preventing multiple events
                scrollDisabled = true;
                activateScroll();
            }
            currentElement = currentElement.next();
            // get element position and scroll to
            scrollTo = currentElement.offset().top;
            $('html,body').animate({scrollTop: scrollTo}, 800, function(){
                location.hash = '#' + currentElement.attr('id');
            });
        }
    }

    function gotoPrev(type){
        if(!scrollDisabled && currentElement.prev().length == 1) {
            if(type == 'scroll') {
                // disable scroll for preventing multiple events
                scrollDisabled = true;
                activateScroll();
            }
            // set new current element
            currentElement = currentElement.prev();
            // get element position and scroll to
            scrollTo = currentElement.offset().top;
            $('html,body').animate({scrollTop: scrollTo}, 800, function(){
                location.hash = '#' + currentElement.attr('id');
            });
        }
    }

    function activateScroll() {
        setTimeout(function(){
            scrollDisabled = false;
        },1200);
    }

});

 

1. http://plugins.jquery.com/mousewheel/ [↩]