4

しばらく前にホットな jQuery パララックス スクロールを使用するサイトを作成しましたが、以前は非常にスムーズでしたが、最近 (ブラウザーの更新?) 途切れ途切れになりました。jQueryスクロールイベントの発火頻度に関係していると思います。これは、私がやろうとしていることの小さな例サイズのバージョンです...

$(window).scroll(function() {
    offset = window.pageYOffset;
    $('#firstImg').css({
         "top" : -750 + (offset/1.5) + "px"
    });
});

基本的に、下にスクロールすると、画像が徐々に垂直方向に視差します。製品はhttp://www.davegamache.com/sandbox/best-of-2010/で確認できます。Campaign Monitor も私のコードを採用サイトに転用しました...こちらで確認してください: http://www.campaignmonitor.com/hiring/ .

信じられないほど途切れ途切れのスクロールを防ぐ方法を理解する必要があります。私は setInterval を作成し、(.scroll() イベントを使用する代わりに) 再配置コードを手動で起動しましたが、スムーズにすることができませんでした (50m/s は途切れ途切れで、十分に起動しなかったため、10m/s でした)頻繁にあるように見えたので、びくびくしただけですか？）。

誰かが助けてくれるかどうか教えてください。本当にありがとう！

4

2 に答える 2

0

あなたのサイトとcampaignmonitor.comを見ました。あなたが説明した途切れ途切れのスクロールを表示している間、あなたのものはうまく機能しているように見えました。

コードの違いを調べたところ、Campaign Monitor はアイテムのスタイル定義 (Seven Years Young の棒グラフなど) に、あなたのようなパーセンテージ % ベースの位置 (スケッチ要素など) ではなく、正確なピクセルを使用していることに気付きました。

いくつかの要素でfirebugを使用して変更をテストしたところ、問題が修正されたようです。

それが役立つことを願っています。

于 2011-10-16T10:12:45.363 に答える
0

Scroll イベントは、実際には (Firefox などの一部のブラウザーでは) スクロール アクションごとに何度もトリガーされるため、スクロールを処理するためのより良い方法はWheel イベントです。

注: wheel イベントは、 mousewheelとカーソル キーを使用し、スクロール バーをドラッグしてもイベントが発生しない場合にのみ発生します。ただし、実際にはスクロール イベントは、カーソル キーまたはマウスホイールを使用してスクロール バーをドラッグすると発生します。

この例を確認することをお勧めします: stackoverflow.com/a/24815216...スクロール アクションのクロス ブラウザー処理を実装します。

これはwheelを使用した短いスニペットです (最新のブラウザー用):

$("html").on("wheel", function (e) {
    var deltaY = e.originalEvent.deltaY;
    var scrollTop = $(this).scrollTop();
    if (deltaY > 0) { console.log("scroll down"); }
    else { console.log("scroll up"); }
});
于 2014-07-17T03:39:48.040 に答える