使用jquery获取元素相对于视口的位置

Question

获取页面上元素相对于视口(而不是文档)的位置的正确方法是什么.jQuery.offset功能似乎有希望:

获取第一个元素的当前坐标,或者在匹配元素集中相对于文档设置每个元素的坐标.

但这与文件有关.是否存在相对于视口返回偏移量的等效方法？

Answer 1

确定元素大小和位置的最简单方法是调用其 getBoundingClientRect()方法.此方法返回视口坐标中的元素位置.它不需要参数,并返回一个具有left,right,top和bottom属性的对象.left和top属性给出元素左上角的X和Y坐标,右侧和底部属性给出右下角的坐标.

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

到处支持.

Answer 2

这里有两个函数来获取页面高度和滚动量(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 3

查看Dimensions插件,特别是scrollTop()/ scrollLeft().有关信息,请访问http://api.jquery.com/scrollTop.

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>