Cách dễ nhất để xác định vị trí phần tử so với cửa sổ tài liệu / nội dung / trình duyệt là gì?

Hiện tôi đang sử dụng .offsetLeft/offsetTop, nhưng phương pháp này chỉ cung cấp cho bạn vị trí liên quan đến phần tử cha, vì vậy bạn cần xác định có bao nhiêu phần tử cha đối với phần tử body, để biết vị trí liên quan đến vị trí phần thân / cửa sổ trình duyệt / tài liệu.

Phương pháp này cũng là để rườm rà.

Bạn có thể xem qua offsetParentcấp cao nhất của DOM.

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

Bạn có thể lên trên và sang trái mà không cần lướt qua DOM như thế này:

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

Bạn có thể sử dụng element.getBoundingClientRect()để truy xuất vị trí phần tử liên quan đến chế độ xem.

Sau đó, sử dụng document.documentElement.scrollTopđể tính toán độ lệch khung nhìn.

Tổng của hai sẽ cung cấp vị trí phần tử liên quan đến tài liệu:

element.getBoundingClientRect().top + document.documentElement.scrollTop

Tôi đề nghị sử dụng

element.getBoundingClientRect()

như được đề xuất ở đây thay vì tính toán bù đắp thủ công thông qua offsetLeft , offsetTop và offsetParent . như được đề xuất ở đây Trong một số trường hợp * truyền tải thủ công tạo ra kết quả không hợp lệ. Xem Plunker này: http://plnkr.co/pC8Kgj

* Khi phần tử nằm bên trong phần tử gốc có thể cuộn với định vị tĩnh (= mặc định).

document-offset( Tập lệnh của bên thứ 3 ) rất thú vị và nó dường như tận dụng các phương pháp tiếp cận từ các câu trả lời khác ở đây.

Thí dụ:

var offset = require('document-offset')
var target = document.getElementById('target')
console.log(offset(target))
// => {top: 69, left: 108} 

Tôi đã tìm thấy phương pháp sau đây là đáng tin cậy nhất khi xử lý các trường hợp cạnh tăng lên offsetTop / offsetLeft.

function getPosition(element) {
    var clientRect = element.getBoundingClientRect();
    return {left: clientRect.left + document.body.scrollLeft,
            top: clientRect.top + document.body.scrollTop};
}

Đối với những người muốn lấy tọa độ x và y của các vị trí khác nhau của một phần tử, liên quan đến tài liệu.

const getCoords = (element, position) => {
  const { top, left, width, height } = element.getBoundingClientRect();
  let point;
  switch (position) {
    case "top left":
      point = {
        x: left + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "center left":
      point = {
        x: left + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "bottom left":
      point = {
        x: left + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
  }
  return point;
};

Sử dụng

• getCoords(document.querySelector('selector'), 'center')

• getCoords(document.querySelector('selector'), 'bottom right')

• getCoords(document.querySelector('selector'), 'top center')

Nếu bạn không phiền khi sử dụng jQuery, thì bạn có thể sử dụng offset()hàm. Tham khảo tài liệu nếu bạn muốn đọc thêm về chức năng này.

http://www.quirksmode.org/js/findpos.html Giải thích cách tốt nhất để làm điều đó, nói chung, bạn đang đi đúng hướng, bạn phải tìm ra những điểm bù và đi lên cây bố mẹ.