1

基本的に、このウェブサイトのスクロール機能を再現する方法を探しています

http://beoplay.com/Products/BeoplayA9

問題は、スクロールを開始すると、ページが通常どおりにスクロールされないことですが、スクロール コマンドが認識され、垂直方向のページ シフトのアニメーションが表示されます。jQueryでその機能を再現する方法を知っている人はいますか?

ウィンドウの高さに基づいて現在のdivを上下にスライドさせるアニメーションをe.preventDefault();いつ実行するかについての何かだと思います。$(window).scroll()

4

3 に答える 3

5

わかりました、私はあなたのニーズに合ったものを作りました:

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/

于 2013-04-19T16:15:27.297 に答える
0

これは私がそれについて行く方法です：

お役に立てれば！

于 2013-04-19T16:10:44.707 に答える