วิธีใดง่ายที่สุดในการกำหนดตำแหน่งองค์ประกอบที่สัมพันธ์กับหน้าต่างเอกสาร / เนื้อหา / เบราว์เซอร์

ตอนนี้ฉันกำลังใช้อยู่.offsetLeft/offsetTopแต่วิธีนี้ให้ตำแหน่งที่สัมพันธ์กับองค์ประกอบหลักเท่านั้นดังนั้นคุณต้องกำหนดจำนวนผู้ปกครองกับองค์ประกอบของร่างกายเพื่อให้ทราบตำแหน่งที่สัมพันธ์กับตำแหน่งของเนื้อหา / หน้าต่างเบราว์เซอร์ / เอกสาร

วิธีนี้ยังยุ่งยาก

คุณสามารถสำรวจoffsetParentขึ้นไปที่ระดับบนสุดของ DOM

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

คุณสามารถขึ้นด้านบนและด้านซ้ายโดยไม่ต้องข้าม DOM เช่นนี้:

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

คุณสามารถใช้element.getBoundingClientRect()เพื่อดึงข้อมูลตำแหน่งองค์ประกอบที่สัมพันธ์กับวิวพอร์ต

จากนั้นใช้document.documentElement.scrollTopในการคำนวณออฟเซ็ตวิวพอร์ต

ผลรวมของทั้งสองจะให้ตำแหน่งองค์ประกอบที่สัมพันธ์กับเอกสาร:

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

ฉันขอแนะนำให้ใช้

element.getBoundingClientRect()

ตามที่เสนอที่นี่ แทนการคำนวณชดเชยด้วยตนเองผ่านoffsetLeft , offsetTopและoffsetParent ตามที่เสนอไว้ที่นี่ใน บางสถานการณ์ * การส่งผ่านด้วยตนเองให้ผลลัพธ์ที่ไม่ถูกต้อง ดู Plunker นี้: http://plnkr.co/pC8Kgj

* เมื่อองค์ประกอบอยู่ภายในพาเรนต์ที่เลื่อนได้โดยมีการวางตำแหน่งคงที่ (= ค่าเริ่มต้น)

document-offset( สคริปต์ของบุคคลที่สาม ) เป็นสิ่งที่น่าสนใจและดูเหมือนว่าจะใช้ประโยชน์จากแนวทางอื่น ๆ ที่นี่

ตัวอย่าง:

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

ฉันพบว่าวิธีการต่อไปนี้น่าเชื่อถือที่สุดเมื่อจัดการกับ edge case ที่เดินทางขึ้น offsetTop / offsetLeft

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

สำหรับผู้ที่ต้องการรับพิกัด x และ y ของตำแหน่งต่างๆขององค์ประกอบโดยสัมพันธ์กับเอกสาร

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

การใช้งาน

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

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

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

หากคุณไม่สนใจที่จะใช้ jQuery คุณสามารถใช้offset()ฟังก์ชันได้ โปรดดูเอกสารประกอบหากคุณต้องการอ่านข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชันนี้

http://www.quirksmode.org/js/findpos.htmlอธิบายวิธีที่ดีที่สุดในการทำทั้งหมดนี้คุณมาถูกทางแล้วที่จะต้องหาจุดชดเชยและสำรวจต้นไม้ของพ่อแม่