2013-12-09 6 views
9

<a>要素のcummulative offsetTopとその要素にナビゲートした後の値がscrollTopの間に予測可能な関係はありますか?javascript:scrollTopとoffsetTopの相違

私は平等であると仮定していましたが、scrollTopが大きい場合(スクロール位置がページの下にある場合)に発生しました。

以下がより正確に質問を定義しています。

function TotalOffsetTop (e) 
{ 
    var offset = 0; 
    do 
     offset += e.offsetTop; 
    while (e = e.offsetParent); 
    return offset; 
} 

//navigate to MyBookmark 
location.hash = "#MyBookmark" 

var BookmarkOffsetTop = TotalOffsetTop(document.getElementByID("MyBookmark")); 
var CurrentPosition = document.getElementsByTagName("body")[0].scrollTop; 

if (CurrentPosition != BookmarkOffsetTop) alert("Design Flaw!"); 

私の究極の目標は、その開始、現在のビューポートの上端より上にある最寄りの<a>タグを見つけることです。これは、ドキュメント内の現在の位置を基準にしてブックマークに戻る(および進む)ことができるためです。

scrollTopの代わりにoffsetTopの代わりに使用する必要があるいくつかの対策がありますか?

私はChromeを使用してこの問題を調査していますが、少なくともいくつかの最新のブラウザで動作するものを究極的に探したいと思います。私はjQueryを避けようとしています。

+3

1 jQueryの –

+0

を避けるためにしようとするためにあなたがノーの答えを受け入れることを願って? – Sampath

答えて

2

あまり詳細に入ることなく、主な違い:scrollTopスプライトは、読み取り/書き込みしている間

offsetTopは、読み取り専用です。 あなたがoffsetTopを使用した場合これによると、あなたはより安全側になるだろう:

html要素のscrollTopスプライトプロパティに注意してください!

バージョン8より前のInternet Explorerでは、スクロール が物理ピクセルサイズで取得され、バージョン8からは論理ピクセルサイズで が返されます。どういう意味ですか?ブラウザが通常のズームレベルで でない場合(ユーザーが Webページをズームインまたはズームアウトする機能を持っている場合:Ctrl +、Ctrl +、 - )、scrollTopプロパティは以前のバージョンよりもバージョン8とは異なる を扱います。

ドキュメントの現在のピクセルサイズが であっても、Internet Explorerのバージョン8より前のデフォルトピクセルサイズでスクロール量が計算されます。 Internet Explorer 8、Firefox、Opera、Google Chrome、Safariの場合、スクロール量は現在のピクセルサイズで計算されます。

たとえば、ズームレベルが200%の場合、scrollTopプロパティ は、同じスクロール位置のバージョン 8よりもバージョン8より2倍大きな値を取得します。 2上のテキストや詳細は

出典: Source

+0

ありがとう!私の質問はそれらの違いを計算する方法を模索していましたが、これは 'location.hash =" #MyBookmark "'が予期しない位置にスクロールする問題を避けるためにリファクタリングのアイディアを提供します。 – dlh

関連する問題