Scroll control with JQuery / Java Script

Question

I am looking for to mimic the same scroll behavior the new Flickr website has at https://www.flickr.com/#section-1.

No matter how hard or fast you move your mouse scroll wheel the result is the same.

I know this is a kind of parallax website but I am more interested in the scroll control.

This is what I am doing right now using this plugin https://github.com/ultrapasty/jquery-disablescroll:

var mypos = $(window).scrollTop();
var up = false;
var newscroll;
$(window).scroll(function () {
    newscroll = $(window).scrollTop();
    if (newscroll > mypos && !up) {
        $(window).disablescroll(); //disable scroll
        //$('body').addClass('stop-scrolling'); //a css that inputs an overflow hidden
        $('#video_bkg').stop().animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 500);
        up = !up;
    } else if(newscroll < mypos && up) {
        $('#video_bkg').stop().animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 500, function() {
            $(window).disablescroll('undo'); //reenable scroll
        });
        up = !up;
    }
    mypos = newscroll;
});

But none of this equals the Flickr's effect.

You should use preventDefault() and stopPropagation() when the mousewheel event is fired. Then you should scroll to the next/prev section depending on mousewheel direction. And also trigger a time counter every time you scroll: this will allow you to avoid change sections too fast. I think that the only jquery plugin you need is mousewheel. I guess you can figure out the code to do that. — taseenb
– taseenb, Commented Aug 8, 2014 at 14:34

Lloyd Banks · Accepted Answer · 2014-08-08 15:05:45Z

1

Here's an example that does this using the fullPage jQuery plugin.

Use

$(document).ready(function() {
    $('#fullpage').fullpage();
});

to initialize the script.

answered Aug 8, 2014 at 15:05

Lloyd Banks

36.9k58 gold badges172 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Scroll control with JQuery / Java Script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related