CODEWITHSUNDEEP
javascriptjquery
Dan Lee
Dan Lee

Reputation: 704

Creating a "polite" scroll snap in jQuery

I'm trying to build a "polite" scroll snap. You might be familiar with parallax scrolling which will sometimes locks panels into the window of the browser - this makes it feel you are fighting with the scroll bar. Apple's website used to use it. Here is a good example.

What I want to do is do some detection on the mouse movement - so if the mouse hasn't moved 3 seconds then the scroll will move the to correct location. I have found some short snippets of jQuery but I'm struggling to piece it together so that it works. As I'm trying to learn and this is a bit of a challenge I just need someone to set me off in the right direction...

The JSFiddle

var timeout = null;

$(window).on('mousemove', function() {

$(function(){
var _top = $(window).scrollTop();
var individualDivHeight = 300;

$(window).scroll(function() {
    var _cur_top = $(window).scrollTop();
    var totalHeight = $('#container').height();
    var posToScroll = Math.round(_cur_top / individualDivHeight) *    individualDivHeight;
}); 
});


if (timeout !== null) {
    clearTimeout(timeout);
}

timeout = setTimeout(function() {
    $('html, body').stop().animate({scrollTop: posToScroll}, 200);
}, 3000);
});

Upvotes: 0

Views: 797

Answers (1)

Jackson
Jackson

Reputation: 3518

I have adjusted your jsFiddle. When you mouse move, the counter restarts.

EDIT:

If you stay idle for 3 seconds then the page will either scroll to the top of the current box or to the end of the current box depending on the value of the threshold and the scrollTop value (0.5 means halfway between a block). Hope this helps.

var timeout = null;
var threshold=0.5;
$(window).on('mousemove', function() {
    if(timeout)clearTimeout(timeout);
    timeout=setTimeout(function(){
        var _top = $(window).scrollTop();
        $('.box').each(function(){
            var $this=$(this);
            var boxHeight = this.offsetHeight;
            var boxTop=this.offsetTop;
            if(_top<boxTop)return;
            if(_top<boxTop+(boxHeight*threshold)) {
                // Go back to the top of the current block
                $('html, body').stop().animate({scrollTop: boxTop}, 200);
            }
            else {
                // Go forward to the end of the current block
                $('html, body').stop().animate({scrollTop: boxTop+boxHeight}, 200);
            }
        });
},3000);

});

Upvotes: 1

Related Questions