25

jQueryを使用して、現在表示されている画面(ビューポート)上の要素の絶対位置を確認するにはどうすればよいですか?

私は持っposition:relativeているので、offset() は親内のオフセットのみを提供します。

私は階層的な div を持っているので、$("#me").parent().offset() + $("#me").offset()どちらも役に立ちません。

ドキュメントではなくウィンドウ内の位置が必要なので、ドキュメントをスクロールすると値が変わるはずです。

すべての親オフセットを合計できることはわかっていますが、よりクリーンなソリューションが必要です。

var top = $("#map").offset().top + 
    $("#map").parent().offset().top + 
    $("#map").parent().parent().offset().top +
    $("#map").parent().parent().parent().offset().top;

何か案は？

更新: パディング/マージン/オフセットを含め、div の上部とドキュメントの上部の間の正確なギャップをピクセル単位で取得する必要がありますか?

私のコード:

HTML

<div id="map_frame" class="frame" hidden="hidden">
    <div id="map_wrapper">
        <div id="map"></div>
    </div>
</div>

CSS

#map_frame{
    border:1px solid #800008;
}

#map_wrapper {
    position:relative;
    left:2%;
    top:1%;
    width:95%;
    max-height:80%;
    display:block;
}

#map {
    position:relative;
    height:100%;
    width:100%;
    display:block;
    border:3px solid #fff;
}

画面いっぱいにマップのサイズを変更する jQuery*

var t = $("#map").offset().top + 
    $("#map").parent().offset().top + 
    $("#map").parent().parent().offset().top + 
    $("#map").parent().parent().parent().offset().top;

$("#map").height($(window).height() - t - ($(window).height() * 8 / 100));

ありがとう...

4

3 に答える 3

55

jQuery doc の.offset()こちらを参照してください。親ではなく、ドキュメントに相対的な位置を示します。あなたはおそらく混乱しています。ドキュメント内の位置ではなくウィンドウ内の位置が必要な場合は、との値を差し引いて、スクロールされた位置を考慮することができます。.offset().position().scrollTop().scrollLeft()

ドキュメントからの抜粋は次のとおりです。

.offset() メソッドを使用すると、ドキュメントに対する要素の現在の位置を取得できます。これを、オフセットの親に対する現在位置を取得する .position() と比較してください。グローバル操作 (特に、ドラッグ アンド ドロップの実装) のために既存の要素の上に新しい要素を配置する場合は、.offset() の方が便利です。

これらを組み合わせるには：

var offset = $("selector").offset();
var posY = offset.top - $(window).scrollTop();
var posX = offset.left - $(window).scrollLeft();

ここで試すことができます（スクロールして数字の変化を確認してください）：http://jsfiddle.net/jfriend00/hxRPQ/

于 2012-12-18T09:39:58.607 に答える