CODEWITHSUNDEEP
jqueryscroll
Corfitz.
Corfitz.

Reputation: 1884

jquery prevent normal scroll and animate

Basically I am looking for a way to recreate the scrolling feature on this website

http://beoplay.com/Products/BeoplayA9

The thing is that when you begin scrolling, the page doesn't scroll as usual, but it notices your scrolling command and animates a vertical page shift. Does anybody know how to recreate that feature in jQuery?

I assume that it would be something about e.preventDefault(); when $(window).scroll() and then perform an animation that slides the current div up or down based on the height of the window.

Upvotes: 1

Views: 977

Answers (3)

yckart
yckart

Reputation: 33438

Ok, I made something that should fit your needs:

var page = $("div.page");
var heights = [];
var index = 0;

page.each(function(i){
    heights[i] = $(this).offset().top;
});

$(document).on('DOMMouseScroll mousewheel', function(e, delta) {
    // normalize the wheel delta
    delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120;

    // do nothing if is already animating
    if($("html,body").is(":animated")) return false;

    // increase the page index based on wheel direction
    index = (index-delta) % (heights.length);

    // animate the scrolling
    $("html,body").stop().animate({
        scrollTop: heights[index]
    }, 1000);

    e.preventDefault();
});

http://jsfiddle.net/ARTsinn/7TKmc/2/

Upvotes: 5

Dom
Dom

Reputation: 40511

This is how I would go about it:

Hope this helps!

Upvotes: 0

swatkins
swatkins

Reputation: 13640

If you take a look at their js file here: http://beoplay.com/layouts/SBV-Custom/HMProductPage/js/src/BeoplayA9_min.js

If you unminify it and take a look at the code starting at line 3444 - you'll see that they are using jQuery.event.fixHooks to create and respond to custom events (["DOMMouseScroll", "mousewheel"]).

They are then able to read the mousewheel movement and manually scroll the page based on that.

If you grab the scrollbar of the page, the scroll happens normally - so it's just the mousewheel that "animates a vertical page shift".

Upvotes: 1

Related Questions