Làm cách nào để có được vị trí hàng đầu của một phần tử so với chế độ xem của trình duyệt?

Tôi muốn có được vị trí của một yếu tố liên quan đến chế độ xem của trình duyệt (chế độ xem trong đó trang được hiển thị, không phải toàn bộ trang). Làm thế nào điều này có thể được thực hiện trong JavaScript?

Cảm ơn nhiều

Các câu trả lời hiện đã lỗi thời. getBoundingClientRect()Phương thức gốc đã xuất hiện khá lâu và thực hiện chính xác những gì câu hỏi yêu cầu. Thêm vào đó, nó được hỗ trợ trên tất cả các trình duyệt (bao gồm cả IE 5, dường như!)

Từ trang MDN :

Giá trị được trả về là một đối tượng TextRonymous, chứa các thuộc tính chỉ đọc bên trái, trên cùng, bên phải và dưới cùng mô tả hộp viền, tính bằng pixel, với góc trên bên trái so với góc trên bên trái của chế độ xem .

Bạn sử dụng nó như vậy:

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

Trong trường hợp của tôi, để an toàn khi cuộn, tôi đã thêm window.scroll vào phương trình:

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

Điều đó cho phép tôi có được vị trí tương đối thực sự của phần tử trên tài liệu, ngay cả khi nó đã được cuộn.

Chỉnh sửa: Thêm một số mã vào tài khoản để cuộn trang.

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

Đối số id là id của phần tử có phần bù bạn muốn. Chuyển thể từ một bài quirksmode .

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

Bạn co thể thử:

node.offsetTop - window.scrollY

Nó hoạt động trên Opera với thẻ meta viewport được xác định.

jQuery thực hiện điều này khá thanh lịch. Nếu bạn xem nguồn của jQuery offset, bạn sẽ thấy đây là cách nó được triển khai:

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

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

Các chức năng trên này Trang sẽ trở lại một hình chữ nhật với đầu, bên trái, chiều cao và phối hợp chiều rộng của một yếu tố thông qua liên quan đến các cổng xem trình duyệt.

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

nguồn

Cảm ơn tất cả các câu trả lời. Có vẻ như Prototype đã có một hàm thực hiện chức năng này (hàm page ()). Bằng cách xem mã nguồn của hàm, tôi thấy rằng trước tiên, nó tính toán vị trí bù phần tử so với trang (tức là phần trên cùng của tài liệu), sau đó trừ scrollTop từ đó. Xem mã nguồn của nguyên mẫu để biết thêm chi tiết.

Tôi giả sử một phần tử có id btn1tồn tại trong trang web và cũng bao gồm jQuery. Điều này đã hoạt động trên tất cả các trình duyệt hiện đại của Chrome, FireFox, IE> = 9 và Edge. jQuery chỉ được sử dụng để xác định vị trí liên quan đến tài liệu.

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

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

Đôi khi getBoundingClientRect()giá trị thuộc tính của đối tượng hiển thị 0 cho IE. Trong trường hợp đó bạn phải đặtdisplay = 'block' cho phần tử. Bạn có thể sử dụng mã dưới đây cho tất cả các trình duyệt để được bù đắp.

Mở rộng chức năng 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));

Sử dụng :

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