jquery阻止正常滚动和动画

Question

基本上我正在寻找一种方法来重建这个网站上的滚动功能

http://beoplay.com/Products/BeoplayA9

问题是,当您开始滚动时,页面不会像往常一样滚动,但它会注意到您的滚动命令并激活垂直页面移动.有谁知道如何在jQuery中重新创建该功能？

我假设这将是什么e.preventDefault();时候$(window).scroll(),然后执行一个动画,根据窗口的高度向上或向下滑动当前div.

Answer 1

好的,我做了一些适合你需求的东西:

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/