Control scroll OnScroll to slide

Question

I am trying to make this scrolleffect work on a website. When a users scroll down it automagically has to go to the next slide. When the users scrolls up it has to go one slide back. I have tried a lot of things using the onScroll function in Jquery, but none of them seem to work.

I use the following script to check whether the users scrolls up or down.

var lastScrollTop = 0;
var check = 1;
var scrollDirection = 'down';

var scrollBottom = $(window).scrollTop() + $(window).height();
    $(window).scroll(function(event) {
        slideHeight = $('.slide').height();
         var st = $(this).scrollTop();
         if (st > lastScrollTop){
             scrollDirection = 'down';
             if (check == 1){
                $('body').scrollTo( {top:'0px', left:'100%'}, 800 );
     check = 0;    
 }

         } else {
             scrollDirection = 'up';
         }
         lastScrollTop = st;


         console.log('ScrollDirection: '+ scrollDirection);

    });

I am not coming any further than this. The (test)website where developing takes place is: http://bit.ly/RBcffY If anyone has experience with this kind of function it would be really helpful.

Answer 1

The jquery.mousewheel plugin can be used to capture the mouse wheel even when no scrolling happened (contrary to $.scroll). This way you can both detect that the mouse wheel was moved and prevent the scrolling from happening. Then it's just a matter to performing the animated scrolling yourself.

var scrollingScreen = false;
$("body").mousewheel(function(event, delta) {
    if ( !scrollingScreen ) {
        scrollingScreen = true; // Throttles the call
        var top = $("body").scrollTop() || // Chrome places overflow at body
                  $("html").scrollTop();   // Firefox places it at html
        // Finds slide headers above/below the current scroll top
        var candidates = $(".slide").filter(function() {
            if ( delta < 0 )
                return $(this).offset().top > top + 1;
            else
                return $(this).offset().top < top - 1;
        });
        // If one of more are found, updates top
        if ( candidates.length > 0 ) {
            if ( delta < 0 )
                top = candidates.first().offset().top;
            else if ( delta > 0 )
                top = candidates.last().offset().top;
        }
        // Performs an animated scroll to the right place
        $("html,body").animate({ scrollTop:top }, 800, "easeInOutQuint", function() {
            scrollingScreen = false; // Releases the throttle
        });
    }
    return false; // Prevents default scrolling
});​

Working example at jsFiddle. This is pretty consistent with the behavior of the reference you showed, and you could add extra effects as needed - by inserting code either before the animate or in its callback function, to perform them before or after the scrolling respectively. (Obs.: the fiddle, running in an iframe, cannot access scrollTop in some browsers, for security reasons, so it stores the top variable globally; however, the code as shown in the answer should work fine in a standalone page)

Note: both in the reference site and in my example, middle clicking and moving the mouse scrolls at will. You might want to prevent that or not, your choice. Nonetheless, the updated example scrolls to a specific point instead of just addind some delta, like you suggested in your question - $('.slide').height(). The reason is to account for the possibility that different slides have different heights. Also, knowing exactly which slide you're showing allows you to properly set the location's hash.

See also this related question for more info.

Answer 2

Here's my version used for scrolling DIV.

Btw. it's better to use object.stop(), to have it smoother on scroll change.

var vi = $('.box'), vis = $('.box .inbox');

// both events needed for Firefox
vi.on('mousewheel DOMMouseScroll', function(e) {
    
    var eo = e.originalEvent;
    var xy = eo.wheelDelta || -eo.detail; //shortest possible code
    
    var isScrollUp = xy /120 > 0;
        
    if (vi.hasClass('scrolling'+(isScrollUp ? '1' : '0'))) return; // no change
    var top = vi.scrollTop();
    var candidates = vis.filter(function() {
     if ( !isScrollUp )
      return this.offsetTop > top;
     else
      return jQuery(this).offset().top < - 1;
    });
    
    if (candidates.length > 0) {
     if (!isScrollUp)
      top = candidates.first()[0].offsetTop;
     else
      top = candidates.last()[0].offsetTop;
    }
    vi.addClass('scrolling'+(isScrollUp ? '1' : '0')).stop().animate({ scrollTop:top }, 300, "swing", function() {
     vi.removeClass('scrolling1 scrolling0');
    });
    return false; // no default
   });

<!-- begin snippet: js hide: false console: true babel: false -->

BODY{
padding:10px;
}
.box{
 height:300px;
 overflow:scroll;
 position:relative;
}

.inbox{
background:purple;height:300px;font-size:35px;color:#fff;font-weight:bold;
}
.inbox:nth-child(2n){background:lightblue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div class="box">
<div class="inbox">1 -- SCROLLIT</div>
<div class="inbox">2</div>
<div class="inbox">3</div>
<div class="inbox">4</div>
<div class="inbox">5</div>
<div class="inbox">6</div>
</div>