2

DIVユーザーがページを垂直にスクロールしてもユーザーに表示されるように、ページ内に配置したい。

このページには、ページの上部に75 px背の高い見出しがあります。ユーザーがページの上部にいて、垂直方向にスクロールしていない場合DIV、見出しの下に配置する必要があります。ただし、ユーザーがページをスクロールして見出しが見えなくなると、同じ見出しをDIVページの上部 (つまり、ブラウザーのビューポートの上端近く) に配置する必要があります。

私の大きな懸念は、window.onscrollブラウザーでのイベントのサポートです。QuirksMode の互換性を確認しました ( http://www.quirksmode.org/dom/events/scroll.html )。IE と Firefox では十分な互換性があるようです。ただし、Safari と Chrome のサポートは少し風変わりなようです。そして、これらのブラウザーは両方とも、ターゲット ブラウザーのリストに含まれています。

window.onscrollイベントがページ/フレームのスクロールを検出する効果的な方法であるかどうか、誰か教えてもらえますか? 他の提案はありますか？

PS CSSposition: fixedルールの使用を検討しました。それは解決策に近いですが、DIVは 1 つの位置に固執しているだけで、見出しの可視性に基づいて適応的に移動させることはできません。

ありがとう！

4

3 に答える 3

1

これがあなたが試すことができるもう一つの代替方法です。ツールバーのdivをページの上部に配置するために使用します（iPadでも機能します）。

onScrollイベントを使用する代わりに、タイマーを使用して500ミリ秒ごとに起動し、を介してウィンドウがスクロールされる場所を検出していますscrollTop。必要に応じて、タイマーを約200msに調整できます。

これが私のコードの簡略化されたサンプルです：

このjqueryコードは、「floatlayer」という名前のdom要素div（ボタンツールバーを含むdiv）の準備ができているかどうかを確認してから、関数を呼び出します。setRepeater

$(#floatlayer").ready(function () {
    return setRepeater();
});

そして、これは500msごとに「keepIncrease」関数を実行し続けるタイマーを作成する関数です。

 function setRepeater() {
        aTimer = window.setInterval("keepIncrease()", 500);
        return false;
    }

これは、500msごとに繰り返される関数keepIncrease（）であり、現在のウィンドウのスクロール位置に基づいてツールバーdivを配置する役割を果たします。

function keepIncrease() {
    var divToolbar = $("#floatlayer")[0];

    var currentPos =  $(window).scrollTop();
    divToolbar.style.top = currentPos + "px";

    return false;
}

トピック外の何か：コンテンツがiframe内にある場合は、$（window）.scrollTop（）の代わりに$（window.parent）.scrollTop（）を使用することもできます。

于 2011-08-22T02:36:22.740 に答える
0

なぜ「固定」を使用しないのですか？

ああ、なるほど、ヘッダーに関する部分を見逃しました。

ただし、position：fixedオプションを引き続き利用できます。最初に「body」に対して位置を設定し（75pxのギャップを考慮）、ヘッダーが視認性を離れたら、ビューポートの上部に対してdivを再調整できます。しかし、何らかの方法でonscrollを使用しないと、おそらくやりたいことを実行できません。場合によっては、決定を下す必要があります。機能をもっと欲しいのか、それとも人々をもっと欲しいのか。

于 2010-04-01T16:25:21.140 に答える
0

Quirksmode での WebKit の不格好さについて読むと、次のことに気付くでしょう。

Safari (iPhone ではなく) と Chrome は、ユーザーが要素をスクロールしたかどうかを判断するために、scrollTop アクセスを監視しているようです。私のテスト スクリプトのログ機能は scrollTop を定期的に変更し、Safari はスクロール イベントを発生させることで応答します。このイベントのロギングにより、ログ要素の scrollTop が再度変更されるため、スクロール イベントは継続的に発生します。これはすべて、ページの下部にあるログ要素にまだスクロールバーがない場合、通常のオーバーフローが表示されている場合、および新しいイベントがログに記録されるたびに scrollTop を 0 に設定した場合でも発生します。scrollTop 行を完全に削除した場合にのみ、バグのある動作が停止します。

要素の を設定していないため、この問題はあなたが達成しようとしていることに影響を与えるべきではありませんscrollTop。onscrollとにかく、どのブラウザ間でも問題がないように見えるウィンドウに接続しています。

于 2010-04-01T16:37:43.960 に答える