web-dev-qa-db-ja.com

ビューポートの上部に対するDivの位置

Javascriptでdivからウィンドウの最上部までのピクセル数（または一般的な測定値）を取得するにはどうすればよいですか。私はドキュメントに関連するオフセットyを探しているのではなく、単にブラウザが表示されている場所の上部を探しています。私はここで「答えられた」解決策を試しました： ブラウザのビューポート内でdivの位置を取得することは可能ですか？ドキュメント内ではありません。ウィンドウ内で ですが、少なくともSafariでは、 divがどこにあっても同じ数を返す問題。

助けてくれてありがとう！

javascripthtmlbrowserpixel
37
PF1

既存の回答は古くなっています。 getBoundingClientRect()メソッドはかなり以前から存在しており、この質問が要求することを正確に実行します。さらに、すべてのブラウザでサポートされています。

this MDNページから：

戻り値はTextRectangleオブジェクトです。これには、境界線ボックスを説明する読み取り専用の左、上、右、および下のプロパティが含まれ、左上ビューポートの左上を基準。

次のように使用します。

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;
72
Himanshu P

//まずブラウザの正しいジオメトリを取得します

(function(){
 Run= window.Run || {};
 if(window.pageYOffset!= undefined){
  Run.topLeftScroll= function(hoo){
   var wo= [window.pageXOffset, window.pageYOffset]
   if(hoo && hoo.nodeType== 1){
    hoo= mr(hoo);
    var T= 0, L= 0;
    while(hoo){
     L+= hoo.offsetLeft;
     T+= hoo.offsetTop;
     hoo= hoo.offsetParent;
    }
    wo= [L, T, wo[0], wo[1]];
   }
   return wo;
  }
 }
 else if(document.body.scrollTop!== undefined){
  Run.topLeftScroll= function(hoo){
   var B= document.body;
   var D= document.documentElement;
   D= (D.clientHeight)? D: B;
   wo= [D.scrollLeft, D.scrollTop];
   if(hoo && hoo.nodeType== 1){
    hoo= mr(hoo);
    var T= 0, L= 0;
    while(hoo){
     L+= hoo.offsetLeft;
     T+= hoo.offsetTop;
     hoo= hoo.offsetParent;
    }
    wo= [L, T, wo[0], wo[1]];
   }
   return wo;
  }
 }
})()

//ショートカット関数

if(window.Run && Run.topLeftScroll){
 Run.getPosition= function(who, wch){
  var A= Run.topLeftScroll(who);
  if(!wch) return A;
  switch(wch.toUpperCase()){
   case 'X': return A[0];// element Left in document
   case 'Y': return A[1];// element Top in document
   case 'L': return A[0]-A[2];// Left minus scroll
   case 'T': return A[1]-A[3];// Top minus scroll
   case 'SL': return A[2];// scroll Left
   case 'ST': return A[3];// scroll Top
   default: return 0;
  }
  // all returns are integers (pixels)
 }
}
2
kennebec

JSフレームワークが提供するものを確認してください。ほとんどの場合、ブラウザ固有の問題と専門分野のすべて、または少なくともほとんどが解決されています。

プロトタイプには scrollOffset（） 関数があります。私はJQueryに精通していないので、正しいマニュアルページを紹介することはできませんが、 here は正しい方向に向かっているように見える質問です。

0
Pekka