0

5 つのブロックがあり、誰もがビューポート サイズ、幅 100%、高さ 100% を持っているこの Web サイトを取得しました。したがって、ページが読み込まれると、最初のページだけが表示されます。他のものはその下にあります。次に下にスクロールすると、最後のページがあるページの最後に到達するまで、2 番目のページ、3 番目のページ、というように表示されます。デフォルトの直線的な方法ではなく、ブロックごとにページを強制的にスクロールする方法があるかどうかを考えていました。ユーザーが下にスクロールしたときに、2 つのブロックの間の道を見るのではなく、2 番目のブロックを直接 (直接ではなく、可能であればアニメーションで) 見てもらいたいと思います。これらのブロックは別のページのようなもので、どこもクリックせずに (それが私にとって最も簡単な (そして atm で唯一の) 動作させる方法であるため)、スクロールするだけでページごとに移動したいと考えています。それは可能ですか？ありがとう！

編集：

scrollTo プラグインを使用してみましたが、どちらもわかりませんでした。簡単にするために、ユーザーが下にスクロールするときを考慮に入れましょう。これは私がしたことです：

var tempScrollTop, currentScrollTop = 0; // 2 vars to check if user scrolls down
var isScrolling = false;
var nextPage = 2 // I'm on 1st page, I want to show page 2 when user scrolls down;
$(window).scroll(function(){
  currentScrollTop = $(window).scrollTop(); // current position

  if (tempScrollTop < currentScrollTop && ! isScrolling ){ // if user scrolls down
    isScrolling = true; // animation in progress, shouldn't get into this 'if' till finished
    $(window).scrollTo('section#page-' + nextPage, 1000, {
        onAfter: function(){ isScrolling = false; nextPage++; }
    });
  }

  tempScrollTop = currentScrollTop; // update the current position
});

「if」ステートメントは、ユーザーが下にスクロールしたかどうかを確認します。技術的にはうまくいくはずですが、私が欲しいページを見せた後、彼は次のページに移動し、最後までスクロールし続けます! 少しテストを行ったところ、すべての単一のアニメーション (つまり、単一のページ全体のスクロール) の後に実行する必要があるコードがランダムに実行されることがわかりました。つまり、 isScrolling = false は発生しませんが、 nextPage++ は発生しますが、それがスクロールを続ける理由です (実際には次のページに移動するため)。アニメーションが進行中ではなく、アニメーションが完了した後にこれを行うべきではありませんか? よくわかりません..

4

2 に答える 2

0

これを行うための最良のオプションはjQuery.ScrollTo pluginです。

セットアップは非常に簡単で、あらゆる種類のアニメーションと、スクロールしたい場所を表現する方法が可能です。

そして、このプラグインを使用して、スクロール イベントを処理する必要があります。

両方を組み合わせることで、あなたが望むものを手に入れることができます。

次または前の要素にスクロールするには、現在表示されているアイテムを追跡して、次または前のアイテムに移動できるようにする必要があります。

また、scrollTo を使用するときはいつでもスクロール位置 (sccrollTop プロパティ) を追跡する必要があります。これにより、ユーザーが上下にスクロールしているかどうかを推測できます。

最後に、ユーザーがスクロールを開始したときに「スクロールフラグ」を設定し、スクロールを停止したときに設定を解除して、scrollTo の各移動後にスクロール位置を見続ける必要があるかどうかを確認する必要があります。

もう 1 つのオプションは jQuery ツールを使用することですが、このデモのようなデザインに変更する必要があります。これはあなたが求めたものではありませんが、より良い UX を提供すると思います。

于 2012-09-20T00:29:11.417 に答える