scrollTopの互換性について

2431 ワード

1、各ブラウザでのscrollTopの差異IE 6/7/8:doctype宣言のないページでdocumentを使用できる.body.scrollTopはscrollTopの高さを取得します.doctype宣言のあるページではdocumentを使用できます.documentElement.scrollTop; Safari:safariは特別で、自分でscrollTopを取得する関数があります:window.pageYOffset ; Firefox:火狐などの比較的標準的なブラウザは安心してdocumentを直接使います.documentElement.scrollTop ; 2、scrollTop値を取得完璧なscrollTop付与フレーズ:var scrollTop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
この付与により、scrollTop値は任意の場合に取得できます.この賦値をよく観察して、何か見つけましたか??そう、windowです.PageYOffset(Safari)は||の中間位置に置かれている.数値0がundefineとまたは演算されると、システムはデフォルトで最後の値を返すからです.すなわち、演算中0==undefine;ページスクロールバーが最上位、すなわちscrollTop値が0のとき.IE下window.pageYOffset(Safari)はundefineに戻り、window.pageYOffset(Safari)を一番後ろに置いたり演算したりすると、scrollTopはundefineを返し、undefineは次の演算でエラーを報告しますよ.他のブラウザはscrollTopの割り当てや演算順序にかかわらずundefineを返さない.安全に使用できる..だから結局IEの問題だよ.杯具...精神が少しぼんやりしていて、はっきり表現されているかどうか分かりません.しかし、最後にこの実験をまとめてOKしたので、安心して使ってください.var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
DTD関連説明:
ページにDTDがある、あるいはDOCTYPEが指定されている場合はdocumentを使用する.documentElement.
ページにDTDがない、あるいはDOCTYPEが指定されていない場合はdocumentを使用する.body.
IEとFirefoxでは同じです.
互換性のため、DTDの有無にかかわらず、次のコードを使用できます.
var scrollTop = window.PageYOffset//FF|document.documentElement.scrollTop || document.body.scrollTop || 0;
documentElementとbodyに関する説明:
bodyはDOMオブジェクトのbodyサブノード、すなわちラベルである.
documentElementは、ノードツリー全体のルートノードroot、すなわちラベルである.
DOMは階層の各オブジェクトをノードと呼び、階層です.ツリー構造と理解できます.私たちのディレクトリのように、ルートディレクトリ、ルートディレクトリの下にサブディレクトリ、サブディレクトリの下にサブディレクトリがあります.
HTMLハイパーテキストタグ言語を例にとると、ドキュメント全体の1つのルートは、DOMでdocumentを使用できることである.documentElementは、ノードツリー全体のルートノードにアクセスします.bodyはサブノードで、bodyラベルにアクセスするには、スクリプトにdocumentと書くべきです.body.
同時にscrollTop属性を設定する場合、jqを例に
     chrome: $("body").animate({
       scrollTop: 600
       }, 500);
        :$("html").animate({
       scrollTop: 600
       }, 500);