40

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

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

4

5 に答える 5

82

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

このMDNページから：

戻り値はTextRectangleオブジェクトであり、ビューポートの左上を基準にした左上の境界ボックスをピクセル単位で記述した、読み取り専用の左、上、右、下のプロパティが含まれています。

あなたはそれを次のように使用します：

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;
于 2013-09-13T20:39:31.950 に答える
2

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

(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)
 }
}
于 2009-12-25T02:24:38.027 に答える
0

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

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

于 2009-12-25T00:11:58.887 に答える
-1

私は少しシャーシェッドしてこれを見つけました：

 function getOffsetPosition(el_id, side){
 element = document.getElementById(el_id);

 newNode = document.createElement("div");
 newNode.innerHTML = "<div style=\"height: 12px;\"></div>";
 element.insertBefore(newNode, element.firstChild);

 iVal = 0;
 oObj = element;
 var sType = "oObj.offset"+side;
 while (oObj && oObj.tagName != "html") {
 iVal += eval(sType);
 oObj = oObj.offsetParent;
 }
 element.removeChild(newNode);
 return iVal;
 }

それがあなたを助けることができるなら^^

于 2009-12-25T00:23:01.407 に答える
-3

この回答は、ドキュメントの原点（左上）に関して要素のx座標とy座標を取得する方法を示しています。.scrollTop値をy座標に追加するだけで、divからビューポートの上部までの距離をピクセル単位で取得できます。

于 2009-12-25T00:18:57.967 に答える