Saya sudah terbiasa bekerja dengan jQuery. Dalam proyek saya saat ini, bagaimanapun, saya menggunakan zepto.js. Zepto tidak menyediakan fileposition() metode seperti yang jQuery. Zepto hanya datang dengan offset().

Ada ide bagaimana saya bisa mengambil offset wadah relatif terhadap induk dengan js murni atau dengan Zepto?

Peringatan: jQuery, bukan JavaScript standar

element.offsetLeftdan element.offsetTopmerupakan properti javascript murni untuk menemukan posisi elemen sehubungan dengan ituoffsetParent ; menjadi elemen induk terdekat dengan posisi relativeatauabsolute

Alternatifnya, Anda selalu bisa menggunakan Zepto untuk mendapatkan posisi elemen DAN induknya, dan cukup kurangi keduanya:

var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
    top: childPos.top - parentPos.top,
    left: childPos.left - parentPos.left
}

Ini memiliki keuntungan memberi Anda offset anak relatif terhadap induknya meskipun induk tidak diposisikan.

di js murni hanya menggunakan offsetLeftdan offsetTopproperti.
Contoh biola: http://jsfiddle.net/WKZ8P/

var elm = document.querySelector('span');
console.log(elm.offsetLeft, elm.offsetTop);

p   { position:relative; left:10px; top:85px; border:1px solid blue; }
span{ position:relative; left:30px; top:35px; border:1px solid red; }

<p>
    <span>paragraph</span>
</p>

Saya melakukannya seperti ini di Internet Explorer.

function getWindowRelativeOffset(parentWindow, elem) {
    var offset = {
        left : 0,
        top : 0
    };
    // relative to the target field's document
    offset.left = elem.getBoundingClientRect().left;
    offset.top = elem.getBoundingClientRect().top;
    // now we will calculate according to the current document, this current
    // document might be same as the document of target field or it may be
    // parent of the document of the target field
    var childWindow = elem.document.frames.window;
    while (childWindow != parentWindow) {
        offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
        offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
        childWindow = childWindow.parent;
    }

    return offset;
};

=================== Anda bisa menyebutnya seperti ini

getWindowRelativeOffset(top, inputElement);

Saya fokus pada IE hanya sesuai fokus saya, tetapi hal serupa dapat dilakukan untuk browser lain.

Tambahkan offset acara ke elemen induk untuk mendapatkan posisi offset absolut acara.

Sebuah contoh :

HTMLElement.addEventListener('mousedown',function(e){

    var offsetX = e.offsetX;
    var offsetY = e.offsetY;

    if( e.target != this ){ // 'this' is our HTMLElement

        offsetX = e.target.offsetLeft + e.offsetX;
        offsetY = e.target.offsetTop + e.offsetY;

    }
}

Jika target peristiwa bukan elemen tempat peristiwa didaftarkan, ia menambahkan offset induk ke offset peristiwa saat ini untuk menghitung nilai offset "Absolut".

Menurut Mozilla Web API: " Properti hanya baca HTMLElement.offsetLeft mengembalikan jumlah piksel yang sudut kiri atas elemen saat ini diimbangi ke kiri dalam simpul HTMLElement.offsetParent. "

Ini sebagian besar terjadi saat Anda mendaftarkan acara pada induk yang berisi beberapa turunan lagi, misalnya: tombol dengan ikon bagian dalam atau rentang teks, li elemen dengan bentang dalam. dll ...

Contoh

Jadi, jika kita memiliki elemen anak dengan id "child-element" dan kita ingin mendapatkan posisi kiri / atas relatif terhadap elemen induk, katakanlah div yang memiliki kelas "item-parent", kita akan gunakan kode ini.

var position = $("#child-element").offsetRelative("div.item-parent");
alert('left: '+position.left+', top: '+position.top);

Plugin Terakhir, untuk plugin yang sebenarnya (dengan beberapa catatan yang menjelaskan apa yang terjadi):

// offsetRelative (or, if you prefer, positionRelative)
(function($){
    $.fn.offsetRelative = function(top){
        var $this = $(this);
        var $parent = $this.offsetParent();
        var offset = $this.position();
        if(!top) return offset; // Didn't pass a 'top' element 
        else if($parent.get(0).tagName == "BODY") return offset; // Reached top of document
        else if($(top,$parent).length) return offset; // Parent element contains the 'top' element we want the offset to be relative to 
        else if($parent[0] == $(top)[0]) return offset; // Reached the 'top' element we want the offset to be relative to 
        else { // Get parent's relative offset
            var parent_offset = $parent.offsetRelative(top);
            offset.top += parent_offset.top;
            offset.left += parent_offset.left;
            return offset;
        }
    };
    $.fn.positionRelative = function(top){
        return $(this).offsetRelative(top);
    };
}(jQuery));

Catatan: Anda dapat menggunakan ini di acara mouseClick atau mouseover

$(this).offsetRelative("div.item-parent");

Saya mendapat Solusi lain. Kurangi nilai properti induk dari nilai properti anak

$('child-div').offset().top - $('parent-div').offset().top;

Tentu mudah dengan JS murni, cukup lakukan ini, bekerja untuk panel HTML 5 tetap dan animasi juga, saya membuat dan mencoba kode ini dan berfungsi untuk semua browser (termasuk IE 8):

<script type="text/javascript">
    function fGetCSSProperty(s, e) {
        try { return s.currentStyle ? s.currentStyle[e] : window.getComputedStyle(s)[e]; }
        catch (x) { return null; } 
    }
    function fGetOffSetParent(s) {
        var a = s.offsetParent || document.body;

        while (a && a.tagName && a != document.body && fGetCSSProperty(a, 'position') == 'static')
            a = a.offsetParent;
        return a;
    }
    function GetPosition(s) {
        var b = fGetOffSetParent(s);

        return { Left: (b.offsetLeft + s.offsetLeft), Top: (b.offsetTop + s.offsetTop) };
    }    
</script>