CODEWITHSUNDEEP
javascriptjqueryscroll
user2749195
user2749195

Reputation: 43

Disable (but still allow) scrolling

I'm looking to recreate the scrolling effect on this site: misfitwearables.com. So far, my approach has been to disable user scrolling, but still detect the scroll direction to allow jQuery to control how the page scrolls. The thing is that it works (yay!) .. but it only works on the first scroll. After the first scroll, it stops responding. How can I get it to listen/respond on every scroll?

$(this).bind( 'mousewheel', function ( e ) {
 if (e.originalEvent.wheelDelta < 0) {
    // scroll down
    $("html, body").animate({ scrollTop: (+50) }, 900, "easeInOutQuart" );
 } else {
    // scroll up
    $("html, body").animate({ scrollTop: (-50) }, 900, "easeInOutQuart" );
 }
 return false;
 });

Upvotes: 3

Views: 637

Answers (1)

omma2289
omma2289

Reputation: 54639

The animating property value is incorrect, should be "+=50" and "-=50":

$(this).bind( 'mousewheel', function ( e ) {
 if (e.originalEvent.wheelDelta < 0) {
    // scroll down
    $("html, body").animate({ scrollTop: "+=50" }, 900, "easeInOutQuart" );
 } else {
    // scroll up
    $("html, body").animate({ scrollTop: "-=50" }, 900, "easeInOutQuart" );
 }
 return false;
});

It was only working once because you were always passing 50 and -50 as the value.

Here's a working fiddle, I also added a check to perform only one animation per scroll event

Upvotes: 1

Related Questions