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

javascript jquery position offset viewport

2022-08-30 05:12:17

获取页面上元素相对于视区（而不是文档）的位置的正确方法是什么？jQuery.offset函数看起来很有希望：

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

但这是相对于文档而言的。是否有等效方法返回相对于视区的偏移量？

答案 1

确定元素的大小和位置的最简单方法是调用其 getBoundingClientRect（）方法。此方法返回视口坐标中的元素位置。它不需要任何参数，并返回一个具有左、右、上和下属性的对象。左侧和顶部属性提供元素左上角的 X 和 Y 坐标，右侧和底部属性提供右下角的坐标。

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

无处不在的支持。

答案 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
}