0

私はjavascriptスクロールに取り組んでいます。次のhtmlコードがあります

JSFIDDLE

<div class="wrapper">
    <div class="red div current"></div>
    <div class="blue div"></div>
    <div class="green div"></div>
    <div class="yellow div"></div>
</div>

上記のコードには、4 つの div タグがありますred, blue, green and yellow。それらはすべて次の css 内の位置です。

html, body {
    height: 100%;
}
.wrapper {
    overflow: hidden;
    height: 100%;
}
.div {
    position: relative;
    height: 100%;
}
.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}
.yellow {
    background: yellow;
}

上記の html と css では、赤い div タグが現在のものです。これは、ユーザーが画面に赤い div タグを見ていることを意味します。今私がやろうとしているのは、ユーザーがウィンドウを1回スクロールすると、次のdivタグ、つまり青がアニメーション化されて一番上に移動し、ユーザーに見えるようになりますが、赤のdivタグは青の後ろにあります。これと同じプロセスが緑と黄色の両方に当てはまります。

問題は、ユーザーが1回スクロールするとdivタグがアニメーション化されるはずですが、現在のjavascriptコードはスクロールを読み続け、divタグを次々とアニメーション化することです。私が望むのは、ユーザーが一度スクロールしてから、青い div タグがアニメーション化されるまでスクロールを無効にする必要があることです。次に、スクロールを有効にする必要があります。ユーザーが 2 回目にスクロールすると、緑色の div タグのアニメーションが完了するまでスクロールが無効になります。黄色も同様です。

上記を達成するにはどうすればよいですか？

ここに私のjavascriptがあります

$(window).on("scroll", function () {
    var next = $('.current').next();
    var height = next.outerHeight();

    next.animate({top: '-=' + height}, 500, function () {
        $(this).prev().removeClass('current');
        $(this).addClass('current');
    });
});
4

2 に答える 2

0

例が期待どおりに機能しなかった主な理由は、div を相対的に配置していて、正しい場所に移動していなかったためです。

ワーキング JSFiddle:

http://jsfiddle.net/seanjohnson08/rVVuc/6/

.wrapper {
    overflow: hidden;
    height: 100%;
    position: relative;
}
.div {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 100%;
}
.current{
    top: 0;
}

発生するスクロール イベントの量を制限する方法を探している場合は、スロットリングを試してください: http://benalman.com/projects/jquery-throttle-debounce-plugin/。スクロール イベントを何回発生させても、jquery に top:0 にアニメーション化するように指示するだけで、それを超えてアニメーション化する可能性はないため、私のソリューションではこれは必要ありません。

于 2013-10-05T08:07:42.260 に答える