Положение Div относительно вершины области просмотра - PullRequest
Новая
       19

Положение Div относительно вершины области просмотра

35 голосов
/ 25 декабря 2009

Мне интересно, как я могу получить количество пикселей (или измерение в целом) от div до верхней части окна в Javascript. Я не ищу смещение y по отношению к документу, просто к вершине, где отображается браузер. Я попробовал решение «ответил» здесь: Можно ли получить позицию div в окне просмотра браузера? Не в документе. В окне , но, по крайней мере, в Safari я сталкиваюсь с проблемой, когда он возвращает одно и то же число независимо от того, где на самом деле находится div.

Спасибо за любую помощь!

Ответы [ 5 ]

67 голосов
/ 14 сентября 2013

Существующие ответы устарели. Метод getBoundingClientRect() существует довольно давно и делает именно то, о чем просит этот вопрос. Плюс это поддерживается во всех браузерах.

С эта страница MDN:

Возвращаемое значение представляет собой объект TextRectangle, который содержит свойства, доступные только для чтения слева, сверху, справа и снизу, описывающие границы в пикселях, с верхним левым относительно верхнего левого окна просмотра .

Вы используете это так: 

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport
var top = viewportOffset.top;
var left = viewportOffset.left;
2 голосов
/ 25 декабря 2009

// Сначала получите правильную геометрию для браузера 

(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)
 }
}
0 голосов
/ 25 декабря 2009

Этот ответ говорит вам, как получить координаты x и y элемента относительно начала координат (вверху слева) документа. Вам просто нужно добавить значение .scrollTop к координате y, чтобы получить расстояние в пикселях от div до верхней части области просмотра.

0 голосов
/ 25 декабря 2009

Я немного подстригся и нашел это: 

 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;
 }

Если это поможет вам ^^

0 голосов
/ 25 декабря 2009

Проверьте, что JS Frameworks может предложить. В основном, они разработали все или, по крайней мере, большинство из проблем и специальностей браузера.

В Prototype есть функции scrollOffset () . Я недостаточно знаком с JQuery, чтобы указать вам правильную страницу руководства, но здесь - это вопрос, который, кажется, движется в правильном направлении.

...