使用jQuery获得相对于视口元素的位置(Using jquery to get element&#

什么是获得相对于视（而非文件）页面上的元素的位置的正确方法。 jQuery.offset功能似乎有希望：

得到的第一个元素的当前坐标，或设置的每个元件的坐标，在所述一组匹配的元素，相对于文档的。

但是，这是相对于文档。是否有返回相对于视偏移等效方法？

Answer 1:

窥视尺寸插件，特别scrollTop() / scrollLeft() 信息可以在这里找到http://api.jquery.com/scrollTop 。

Answer 2:

以确定元件的大小和位置的最简单方法是调用其getBoundingClientRect（）方法。此方法返回在视口中坐标元素的位置。该公司预计没有参数和返回与左，右，上 ，下属性的对象。左和top属性得到的X和元件的左上角和右的Y坐标和底部性质得到右下角的坐标。

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

支持无处不在。

Answer 3:

这里有两个函数来获取页面的高度和滚动量（X，Y）不使用（浮肿）尺寸插件的：

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

Answer 4:

jQuery.offset需要与组合scrollTop和scrollLeft如该图所示：

演示：

 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>

Answer 5:

这里是计算在视口内的元素的当前位置的功能：

/**
 * 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))
    ];
}

返回值的计算如下：

用法：

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

演示：

 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>

Answer 6:

我发现，通过cballou答案在Firefox不再担任2014年一月的具体来说， if (self.pageYOffset)没有，如果客户端已滚动正确触发，但不下来-因为0是一个falsey数。这也未被发现有一阵子，因为Firefox的支持document.body.scrollLeft / Top ，但这已不再是我的工作（在Firefox 26.0）。

下面是我修改的方案：

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

测试和FF26，铬31，IE11工作。几乎可以肯定在较旧版本的所有的人的。

文章来源: Using jquery to get element's position relative to viewport