1. ホーム
  2. javascript

[解決済み] jQueryで要素の位置をウィンドウから相対的に取得する

2022-04-16 07:07:49

質問

HTML DOM IDが与えられたとき、JavaScript/JQueryで要素のウィンドウに対する相対位置を取得するにはどうしたらよいでしょうか。 これは、要素がiframeまたはいくつかの他の要素の内部にあるかもしれないので、ドキュメントやオフセット親に対する相対的なものと同じではありません。 私は、要素の矩形の画面上の位置(位置と寸法)を、現在表示されている状態で取得する必要があります。 要素が現在画面外にある(スクロールされた)場合は、負の値でもかまいません。

iPad (WebKit / WebView) アプリケーション用です。 ユーザが UIWebView そのリンクに関する詳細情報を表示するポップオーバービューを開くことになっています。 このポップオーバー・ビューには、それを呼び出した画面の部分に戻るための矢印が表示される必要があります。

どのように解決するのですか?

はじめに .オフセット 要素の位置を取得し、ウィンドウに対する相対位置を計算します。

参照 :

1. オフセット

2. スクロール

3. スクロールトップ

これで試してみてください フィドル

次の数行のコードで、これを解決する方法を説明します。

いつ .スクロール イベントが実行された場合、要素のウィンドウオブジェクトに対する相対位置を計算します。

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

ブラウザでスクロールが行われたときに、上記のイベントハンドラ関数を呼び出します。

コードスニペット


function log(txt) {
  $("#log").html("location : <b>" + txt + "</b> px")
}

$(function() {
  var eTop = $('#element').offset().top; //get the offset top of the element
  log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

  $(window).scroll(function() { //when window is scrolled
    log(eTop - $(window).scrollTop());
  });
});
#element {
  margin: 140px;
  text-align: center;
  padding: 5px;
  width: 200px;
  height: 200px;
  border: 1px solid #0099f9;
  border-radius: 3px;
  background: #444;
  color: #0099d9;
  opacity: 0.6;
}
#log {
  position: fixed;
  top: 40px;
  left: 40px;
  color: #333;
}
#scroll {
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

<div id="element">Hello
  <hr>World</div>
<div id="scroll">Scroll Down</div>