Usando jquery para obter a posição do elemento em relação à janela de visualização

117

Qual é a maneira correta de obter a posição de um elemento na página em relação à janela de visualização (em vez do documento). jQuery.offsetfunção parecia promissora:

Obtenha as coordenadas atuais do primeiro elemento, ou defina as coordenadas de cada elemento, no conjunto de elementos correspondentes, em relação ao documento.

Mas isso é relativo ao documento. Existe um método equivalente que retorna deslocamentos em relação à janela de visualização?

DA.
fonte
5
NOTA: Veja a resposta de @Igor G ...
Carl Smith
3
Para DA, você realmente deve definir a resposta de Igor G como aceita, é um salva-vidas!
Vincent Duprez

Respostas:

26

Olhe para o plugin Dimensions, especificamente scrollTop()/ scrollLeft(). As informações podem ser encontradas em http://api.jquery.com/scrollTop .

Agent_9191
fonte
8
Eu não queria usar outro plugin, mas $ (window) .scrollTop () é exatamente o que eu precisava! Obrigado!
DA.
16
O plugin de dimensões agora faz parte do núcleo do jQuery. O plugin ViewPort também pode ser útil: appelsiini.net/projects/viewport
StriplingWarrior
287

A maneira mais fácil de determinar o tamanho e a posição de um elemento é chamar seu método getBoundingClientRect () . Este método retorna as posições dos elementos nas coordenadas da janela de visualização. Ele não espera argumentos e retorna um objeto com as propriedades esquerda, direita, superior e inferior . As propriedades esquerda e superior fornecem as coordenadas X e Y do canto superior esquerdo do elemento e as propriedades direita e inferior fornecem as coordenadas do canto inferior direito.

element.getBoundingClientRect(); // Get position in viewport coordinates

Suportado em todos os lugares.

Igor G.
fonte
15
É incrível este método ter sido adicionado pelo IE5 ... quando algo é bom, é bom!
roy riojas,
Isso parecia ótimo no início, mas não leva em conta um usuário
fazendo
2
Não compatível com o firefox mais recentegetBoundingClientRect is not a function
user007
2
@ user007 Confirmo que é compatível com o último firefox.
adriendenat
26
Ótima resposta, e para torná-la jquery simplesmente faça desta forma: $('#myElement')[0].getBoundingClientRect().top(ou qualquer outra posição)
Guillaume Arluison
40

Aqui estão duas funções para obter a altura da página e os valores de rolagem (x, y) sem o uso do plug-in de dimensões (inchado):

// getPageScroll() by quirksmode.com
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;
    }
    return new Array(xScroll,yScroll)
}

// Adapted from getPageSize() by quirksmode.com
function getPageHeight() {
    var windowHeight
    if (self.innerHeight) { // all except Explorer
      windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
      windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
      windowHeight = document.body.clientHeight;
    }
    return windowHeight
}
Corey Ballou
fonte
Isto é brilhante. Muito útil.
Jimmy,
Por curiosidade, por que você usou a propriedade "self" em vez de window neste caso?
dkugappi
23

jQuery.offsetprecisa ser combinado com scrollTope scrollLeftconforme mostrado neste diagrama:

rolagem da janela de visualização e deslocamento de elemento

Demo:

function getViewportOffset($e) {
  var $window = $(window),
    scrollLeft = $window.scrollLeft(),
    scrollTop = $window.scrollTop(),
    offset = $e.offset(),
    rect1 = { x1: scrollLeft, y1: scrollTop, x2: scrollLeft + $window.width(), y2: scrollTop + $window.height() },
    rect2 = { x1: offset.left, y1: offset.top, x2: offset.left + $e.width(), y2: offset.top + $e.height() };
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop,
    insideViewport: rect1.x1 < rect2.x2 && rect1.x2 > rect2.x1 && rect1.y1 < rect2.y2 && rect1.y2 > rect2.y1
  };
}
$(window).on("load scroll resize", function() {
  var viewportOffset = getViewportOffset($("#element"));
  $("#log").text("left: " + viewportOffset.left + ", top: " + viewportOffset.top + ", insideViewport: " + viewportOffset.insideViewport);
});
body { margin: 0; padding: 0; width: 1600px; height: 2048px; background-color: #CCCCCC; }
#element { width: 384px; height: 384px; margin-top: 1088px; margin-left: 768px; background-color: #99CCFF; }
#log { position: fixed; left: 0; top: 0; font: medium monospace; background-color: #EEE8AA; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- scroll right and bottom to locate the blue square -->
<div id="element"></div>
<div id="log"></div>

Salman A
fonte
2
funcionou muito bem para mim, mas eu estava usando isso para determinar se uma dica de ferramenta estava saindo dos limites, então eu modifiquei para incluir os valores inferior e direito: jsfiddle.net/EY6Rk/21
Jordan
Em qualquer caso, esta é a resposta absolutamente correta. Todos os outros têm problemas dependendo da configuração delta do mouse / scroll, navegadores, localização obj, etc.
Pedro Ferreira
2

Esta é uma função que calcula a posição atual de um elemento na janela de visualização:

/**
 * Calculates the position of a given element within the viewport
 *
 * @param {string} obj jQuery object of the dom element to be monitored
 * @return {array} An array containing both X and Y positions as a number
 * ranging from 0 (under/right of viewport) to 1 (above/left of viewport)
 */
function visibility(obj) {
    var winw = jQuery(window).width(), winh = jQuery(window).height(),
        elw = obj.width(), elh = obj.height(),
        o = obj[0].getBoundingClientRect(),
        x1 = o.left - winw, x2 = o.left + elw,
        y1 = o.top - winh, y2 = o.top + elh;

    return [
        Math.max(0, Math.min((0 - x1) / (x2 - x1), 1)),
        Math.max(0, Math.min((0 - y1) / (y2 - y1), 1))
    ];
}

Os valores de retorno são calculados assim:

Uso:

visibility($('#example'));  // returns [0.3742887830933581, 0.6103752759381899]

Demo:

function visibility(obj) {var winw = jQuery(window).width(),winh = jQuery(window).height(),elw = obj.width(),
    elh = obj.height(), o = obj[0].getBoundingClientRect(),x1 = o.left - winw, x2 = o.left + elw, y1 = o.top - winh, y2 = o.top + elh; return [Math.max(0, Math.min((0 - x1) / (x2 - x1), 1)),Math.max(0, Math.min((0 - y1) / (y2 - y1), 1))];
}
setInterval(function() {
  res = visibility($('#block'));
  $('#x').text(Math.round(res[0] * 100) + '%');
  $('#y').text(Math.round(res[1] * 100) + '%');
}, 100);
#block { width: 100px; height: 100px; border: 1px solid red; background: yellow; top: 50%; left: 50%; position: relative;
} #container { background: #EFF0F1; height: 950px; width: 1800px; margin-top: -40%; margin-left: -40%; overflow: scroll; position: relative;
} #res { position: fixed; top: 0; z-index: 2; font-family: Verdana; background: #c0c0c0; line-height: .1em; padding: 0 .5em; font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="res">
  <p>X: <span id="x"></span></p>
  <p>Y: <span id="y"></span></p>
</div>
<div id="container"><div id="block"></div></div>

Arne
fonte
0

Descobri que a resposta de cballou não estava mais funcionando no Firefox em janeiro de 2014. Especificamente, if (self.pageYOffset)não acionava se o cliente havia rolado para a direita, mas não para baixo - porque 0é um número falsey. Isso não foi detectado por um tempo porque o Firefox era compatível com document.body.scrollLeft/ Top, mas não está mais funcionando para mim (no Firefox 26.0).

Esta é minha solução modificada:

var getPageScroll = function(document_el, window_el) {
  var xScroll = 0, yScroll = 0;
  if (window_el.pageYOffset !== undefined) {
    yScroll = window_el.pageYOffset;
    xScroll = window_el.pageXOffset;
  } else if (document_el.documentElement !== undefined && document_el.documentElement.scrollTop) {
    yScroll = document_el.documentElement.scrollTop;
    xScroll = document_el.documentElement.scrollLeft;
  } else if (document_el.body !== undefined) {// all other Explorers
    yScroll = document_el.body.scrollTop;
    xScroll = document_el.body.scrollLeft;
  }
  return [xScroll,yScroll];
};

Testado e funcionando em FF26, Chrome 31, IE11. Quase certamente funciona em versões mais antigas de todos eles.

pglhall
fonte