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?
JavaScript
tag saat Anda menggunakan JavaScript murni. Jika Anda menggunakan kerangka kerja atau pustaka maka Anda tidak menggunakanJavaScript
tag. Jika nama Anda Jeff, saya tidak akan memanggil Anda Sally.Jawaban:
Peringatan: jQuery, bukan JavaScript standar
element.offsetLeft
danelement.offsetTop
merupakan properti javascript murni untuk menemukan posisi elemen sehubungan dengan ituoffsetParent
; menjadi elemen induk terdekat dengan posisirelative
atauabsolute
Alternatifnya, Anda selalu bisa menggunakan Zepto untuk mendapatkan posisi elemen DAN induknya, dan cukup kurangi keduanya:
Ini memiliki keuntungan memberi Anda offset anak relatif terhadap induknya meskipun induk tidak diposisikan.
sumber
static
tidak diimbangi orang tua.di js murni hanya menggunakan
offsetLeft
danoffsetTop
properti.Contoh biola: http://jsfiddle.net/WKZ8P/
sumber
p.offsetTop + p.parentNode.offsetTop
Anda dapat membungkus ini dalam pemanggilan fungsi rekursif seperti yang diusulkan PPK beberapa tahun yang lalu. Anda dapat mengubah fungsi untuk meneruskan jumlah level yang akan naik atau menggunakan pemilih untuk ditiru$(selector).parents(parentSelector)
. Saya lebih suka solusi ini karena implementasi zepto hanya berfungsi pada browser yang mendukunggetBoundingClientsRect
- yang tidak dimiliki beberapa ponsel.getBoundingClientsRect
didukung secara luas ... jika ada yang tahu ponsel mana yang tidak mendukungnya, saya akan tertarik (tidak dapat menemukan tabel dukungan untuk ponsel tentang hal itu).$(this).offset().left
menjadithis.offsetLeft
.jQuery.position()
perilaku yang salah di dalam induk yang ditransformasikan ke 3D, terima kasih banyak!Saya melakukannya seperti ini di Internet Explorer.
=================== Anda bisa menyebutnya seperti ini
Saya fokus pada IE hanya sesuai fokus saya, tetapi hal serupa dapat dilakukan untuk browser lain.
sumber
Tambahkan offset acara ke elemen induk untuk mendapatkan posisi offset absolut acara.
Sebuah contoh :
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 ...sumber
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.
Plugin Terakhir, untuk plugin yang sebenarnya (dengan beberapa catatan yang menjelaskan apa yang terjadi):
sumber
Saya mendapat Solusi lain. Kurangi nilai properti induk dari nilai properti anak
sumber
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):
sumber