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

ฉันต้องการรับตำแหน่งขององค์ประกอบที่สัมพันธ์กับวิวพอร์ตของเบราว์เซอร์ (วิวพอร์ตที่แสดงหน้านั้นไม่ใช่ทั้งหน้า) สิ่งนี้สามารถทำได้ใน JavaScript

ขอบคุณมาก

คำตอบที่มีอยู่ล้าสมัยแล้ว getBoundingClientRect()วิธีการดั้งเดิมได้รับในขณะนี้และทำสิ่งที่คำถามถาม นอกจากนี้ยังรองรับทุกเบราว์เซอร์ (รวมถึง IE 5 ดูเหมือน!)

จากหน้า MDN :

ค่าส่งกลับเป็นวัตถุ TextRectangle ซึ่งประกอบด้วยอ่านอย่างเดียวที่เหลืออยู่บนคุณสมบัติด้านขวาและด้านล่างอธิบายชายแดนกล่องพิกเซลกับด้านบนซ้ายเทียบกับด้านซ้ายบนของวิวพอร์ต

คุณใช้มันอย่างนั้น:

var viewportOffset = el.getBoundingClientRect();
// these are relative to the viewport, i.e. the window
var top = viewportOffset.top;
var left = viewportOffset.left;

ในกรณีของฉันเพื่อความปลอดภัยในการเลื่อนฉันเพิ่ม window.scroll ลงในสมการ:

var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;

ที่ช่วยให้ฉันได้รับตำแหน่งสัมพัทธ์ที่แท้จริงขององค์ประกอบในเอกสารแม้ว่าจะถูกเลื่อน

แก้ไข: เพิ่มรหัสลงในบัญชีสำหรับการเลื่อนหน้า

function findPos(id) {
    var node = document.getElementById(id);     
    var curtop = 0;
    var curtopscroll = 0;
    if (node.offsetParent) {
        do {
            curtop += node.offsetTop;
            curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
        } while (node = node.offsetParent);

        alert(curtop - curtopscroll);
    }
}

อาร์กิวเมนต์ id คือ id ขององค์ประกอบที่คุณต้องการออฟเซ็ต ดัดแปลงมาจากการโพสต์ quirksmode

var element =  document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

คุณสามารถลอง:

node.offsetTop - window.scrollY

ใช้งานได้บน Opera พร้อมกำหนดเมตาแท็กวิวพอร์ต

jQuery ใช้อุปกรณ์นี้อย่างหรูหรา หากคุณดูที่แหล่งของ jQuery offsetคุณจะพบว่านี่เป็นวิธีการใช้งาน:

var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
    top: rect.top + win.pageYOffset,
    left: rect.left + win.pageXOffset
};

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

    localToGlobal: function( _el ) {
       var target = _el,
       target_width = target.offsetWidth,
       target_height = target.offsetHeight,
       target_left = target.offsetLeft,
       target_top = target.offsetTop,
       gleft = 0,
       gtop = 0,
       rect = {};

       var moonwalk = function( _parent ) {
        if (!!_parent) {
            gleft += _parent.offsetLeft;
            gtop += _parent.offsetTop;
            moonwalk( _parent.offsetParent );
        } else {
            return rect = {
            top: target.offsetTop + gtop,
            left: target.offsetLeft + gleft,
            bottom: (target.offsetTop + gtop) + target_height,
            right: (target.offsetLeft + gleft) + target_width
            };
        }
    };
        moonwalk( target.offsetParent );
        return rect;
}

function inViewport(element) {
    let bounds = element.getBoundingClientRect();
    let viewWidth = document.documentElement.clientWidth;
    let viewHeight = document.documentElement.clientHeight;

    if (bounds['left'] < 0) return false;
    if (bounds['top'] < 0) return false;
    if (bounds['right'] > viewWidth) return false;
    if (bounds['bottom'] > viewHeight) return false;

    return true;
}

แหล่ง

ขอบคุณสำหรับคำตอบทั้งหมด ดูเหมือนว่า Prototype มีฟังก์ชันที่ใช้ฟังก์ชันนี้ (the page ()) โดยการดูซอร์สโค้ดของฟังก์ชั่นฉันพบว่ามันจะคำนวณตำแหน่งออฟเซ็ตองค์ประกอบที่สัมพันธ์กับหน้า (เช่นบนเอกสาร) จากนั้นลบ scrollTop ออกจากนั้น ดูซอร์สโค้ดของต้นแบบสำหรับรายละเอียดเพิ่มเติม

ฉันสมมติว่าองค์ประกอบที่มีรหัสbtn1อยู่ในหน้าเว็บและ jQuery ที่รวมอยู่ สิ่งนี้ใช้ได้กับเบราว์เซอร์สมัยใหม่ทั้งหมดของ Chrome, FireFox, IE> = 9 และ Edge jQuery ใช้เพื่อกำหนดตำแหน่งที่สัมพันธ์กับเอกสารเท่านั้น

var screenRelativeTop =  $("#btn1").offset().top - (window.scrollY || 
                                            window.pageYOffset || document.body.scrollTop);

var screenRelativeLeft =  $("#btn1").offset().left - (window.scrollX ||
                                           window.pageXOffset || document.body.scrollLeft);

บางครั้งgetBoundingClientRect()ค่าคุณสมบัติของวัตถุแสดงเป็น 0 สำหรับ IE ในกรณีที่คุณต้องตั้งค่าdisplay = 'block'องค์ประกอบ คุณสามารถใช้รหัสด้านล่างสำหรับเบราว์เซอร์ทั้งหมดเพื่อรับการชดเชย

ขยายฟังก์ชัน jQuery:

(function($) {
    jQuery.fn.weOffset = function () {
        var de = document.documentElement;
        $(this).css("display", "block");
        var box = $(this).get(0).getBoundingClientRect();
        var top = box.top + window.pageYOffset - de.clientTop;
        var left = box.left + window.pageXOffset - de.clientLeft;
        return { top: top, left: left };
    };
}(jQuery));

การใช้:

var elementOffset = $("#" + elementId).weOffset();