8

このフィドルで見ることができるループ/無限のウェブサイトをスクロールするとき、私は助け/正しい方向へのポイント/またはちらつき/ジャンプの解決策を探しています。

ジャンプを引き起こしていると思われるものは次のとおりです。

" $(window).scrollTop(half_way - child_height);"、そしてChrome WindowsのscrollTopのバグである可能性もありますが、現時点ではすべてのブラウザで発生しています。

「」を削除すると- child_height、ちらつきはなくなりますが、ページが正しくスクロールしなくなります。これは、このフィドルで確認できます。

また、最初のスクロールで、右側の列が3つのボックスでジャンプします。これも''のためです。これは、「 」half_wayを指定することで修正できます。bottom: -600px;

完全なコード：

http://jsfiddle.net/djsbaker/j3d8r/1/

var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);

function crisscross() {
    $('#up-left').css('bottom', '-' + window.scrollY + 'px');
    $('#down-right').css('bottom', '-' + window.scrollY + 'px');
    var firstLeft = $('#up-left').children().first();
    var lastLeft = $('#up-left').children().last();
    var lastRight = $('#down-right').children().last();
    var firstRight = $('#down-right').children().first();

    if (window.scrollY > half_way ) {

        $(window).scrollTop(half_way - child_height);
        lastRight.appendTo('#up-left');
        firstLeft.prependTo('#down-right');

    } else if (window.scrollY < half_way - child_height) {

        $(window).scrollTop(half_way);
        lastLeft.appendTo('#down-right');
        firstRight.prependTo('#up-left');
    }
}

$(window).scroll(crisscross);
4

4 に答える 4

5

わかりました-これが「動作する」バージョンです-動作とは、以前よりちらつきが少ないことを意味します。ちらつきはないと思っていましたが、バッテリー電源を使用していたときでしたが、主電源に接続すると、CPU はちらつきが発生するほど高速です。

前述したように、ちらつきをなくすには、DOM を直接操作するのではなく、オブジェクトを複製し、操作してから DOM に置き換える必要があります。

これを行うには、それらを操作する内容を取得し、<div id="content">それらをその <div> に置き換えます。

また、DOM 内のものを 1 回だけ検索し、それ以降は繰り返し検索するのではなく、そのオブジェクトへの参照を使用することをお勧めします。例えば

var leftSide = $(clone).find('.up-left');
....
lastRight.appendTo(leftSide);
....
 $(leftSide).css('bottom', '-' + window.scrollY + 'px');

それよりも：

lastRight.appendTo('#up-left');
$('#up-left').css('bottom', '-' + window.scrollY + 'px');

DOM の検索は比較的遅いため、参照を保存するとパフォーマンスが向上し、ちらつきが軽減されます。

オブジェクトを保存すると、コードが理解しやすくなります (imho)。おそらく異なるものではなく、同じものを参照していることを簡単に確認できるからです。

于 2013-02-02T01:04:37.173 に答える
1

これはロングショットかもしれませんが、infinitescrollで作業しているときに同じちらつきがあり、imagesLoadedを使用することになりました.追加の画像（現在ロードされている）をフェードインで追加することになり、事実のためにちらつきを防ぎましたそれらはロードされました。

おそらく、imagesloaded を使用するか、画像のコールバックを使用することで、ちらつきを解決できます。ただし、速度は低下します。すべてをできるだけ速くスクロールしたい場合、これは解決策ではないかもしれないと想像できます。幸運を！

于 2013-02-04T15:11:26.980 に答える
1

Danack ソリューションを使用している Windows では、まだクロムがちらつきます。このサイトでは、私はすべてのスクロールを制御し (手動で一方の側をスクロールします)、要素の絶対位置を指定します。

または、ブラウザのスクロールの使用を主張する場合は、アニメーションを使用することもできます: 最後の要素の高さを 0px までアニメーション化してから、appendTo を使用し、0px から通常の高さまでアニメーション化します...

于 2013-02-02T02:05:54.980 に答える
1

解決策は、ネイティブのスクロール機能を使用せず、スクロールをシミュレートすることです。これはoverflow、コンテンツの を「非表示」に設定し、さらに「マウスホイール」イベントをキャプチャして、呼び出されたときに何らかのアクションをトリガーすることで実行できます。ここでこれを試し始めました(私は jQuery に慣れているため、jQuery の代わりに MooTools を使用しています)。現在、最初の要素のマージントップを変更することにより、左側で「機能」しています。

私の次のステップは次のとおりです。

  • 最初の要素の負の margin-top がその高さよりも大きいかどうかを確認し、そうであれば右側に移動します。
  • 負の margin-bottom を持つ右側の最後のボックスの同じロジック。

ただし、これにはいくつかの欠点があります。スクロールのシミュレートは、ネイティブのスクロール機能ほど自然に感じられず、マウスホイールをクリックしても機能しません。これらは解決可能かもしれませんが、スムーズに動作させるにはさらにコーディングが必要です。とにかく、最終的には、ちらつきがなく、側面に粘着性のあるスクロールバーがない解決策が得られます（代替のアイデアは、マウスオーバーでスクロールをトリガーする側面の小さな領域である可能性があります）。

于 2013-02-06T23:08:38.513 に答える