[解決済み] 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>
関連
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み] jQueryを使って要素のIDを取得するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] セレクタの子を取得する方法は?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?
-
[解決済み] jQueryで現在のURLを取得する?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
vueにおけるfilterの適用シーンについて解説します。
-
Vueのフィルタの説明
-
[解決済み】Node Version Manager のインストール - nvm コマンドが見つかりません。
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
JavaScriptのgetElementById()メソッド入門