javascript_javascriptスキルのscrollTopの詳細説明

scrollTop はスクロールの高さを表します。デフォルトでは、スクロールはposition:0; から始まります。scrollTop のオフセット (offset) は、上からのオフセットをピクセル単位で表します。
scrollTop() のスクロールの高さは、スクロール値を「設定」することも、スクロール値を「取得」することもできます。
スクロール値が設定されている場合、このメソッドは一致するすべての要素のスクロール値を設定します。
スクロール値を取得する場合、このメソッドは最初に一致した要素のスクロール位置のみを返します。
scrollTop の値を取得するには、次のコードを参照できます:

コードをコピーします コードは次のとおりです:

varscrollTop = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop;

1. ブラウザごとのスクロールトップの違い

IE6/7/8:
doctype 宣言のないページの場合は、document.body.scrollTop を使用してスクロールトップの高さを取得できます。 doctype 宣言のあるページの場合は、 document.documentElement.scrollTop; を使用できます。 サファリ:
Safari は特別で、scrollTop を取得する独自の関数があります: window.pageYOffset; Firefox:
Firefox やその他の比較的標準的なブラウザの場合は、はるかに心配する必要はありません。 document.documentElement.scrollTop ;
を使用してください。
2. スクロールトップ値を取得します

scrollTop 割り当てフレーズを完全に取得:

コードをコピーします コードは次のとおりです: varscrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

scrollTop 値は、この割り当てを通じてどのような状況でも取得できます。

この課題を注意深く観察してください、何か気づきましたか? ? そうです、|| の真ん中に window.pageYOffset (Safari) が配置されています。

数値 0 と undefine の OR を演算すると、システムはデフォルトで最後の値を返すためです。つまり、OR 演算では 0 == undefine になります。
ページ スクロール バーがちょうど上部にあるとき、つまり、scrollTop 値が 0 のとき。 IE では、window.pageYOffset (Safari) は undefine を返します。このとき、window.pageYOffset (Safari) を OR 演算の最後に置くと、次の演算で undefine を使用すると、scrollTop は undefine を返します。報告した。
他のブラウザではscrollTopの割り当てや操作順序に関係なくundefineを返すことはありませんので安心してご利用いただけます。 結局のところ、やはり IE の問題です...
少し混乱していて、自分の考えを明確に表現できるかわかりません。
しかし最終的には、この文はテスト済みで問題ないので、安心して使用できると結論付けました。

コードをコピーします

コードは次のとおりです: varscrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

DTD 関連の手順:

ページに DTD がある場合、または DOCTYPE が指定されている場合は、document.documentElement を使用します。

ページに DTD がない場合、または DOCTYPE が指定されていない場合は、document.body が使用されます。

これは IE と Firefox の両方に当てはまります。

互換性を確保するために、DTD の有無に関係なく、次のコードを使用できます:

コードをコピーします

コードは次のとおりです: varscrollTop = window.pageYOffset //FFの場合 || document.documentElement.scrollTop

|| document.body.scrollTop

|| 0;

DocumentElement と本文関連の手順:

body は DOM オブジェクトの body 子ノード、つまり

タグです。

documentElement は、ノード ツリー全体のルート ノードのルートであり、

タグです。

DOM は、階層内の各オブジェクトをノードと呼びます。これは、ディレクトリと同じようにツリー構造として理解できます。ルート ディレクトリには、サブディレクトリもあります。ディレクトリの下にあります。

HTML ハイパーテキスト マークアップ言語を例に挙げます。ドキュメント全体の 1 つのルートは、DOM の document.documentElement を使用してアクセスできます。これは、ノード ツリー全体のルート ノードです。 body は子ノードです。body タグにアクセスするには、スクリプト内に document.body を記述する必要があります。

ボタンをクリックしてページの先頭までスクロールしたい場合は、jquery を使用してコード $(document).scrollTop(0) をクリックして実行し、先頭までスクロールします。

同じスクロール位置scrollLeftは左へスクロールする位置を示します。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。