jQuery mendapatkan lokasi elemen relatif ke jendela


168

Diberikan ID DOM HTML, bagaimana cara mendapatkan posisi elemen relatif ke jendela di JavaScript / JQuery? Ini tidak sama dengan relatif terhadap dokumen atau offset induk karena elemen mungkin di dalam iframe atau elemen lainnya. Saya perlu mendapatkan lokasi layar persegi panjang elemen (seperti dalam posisi dan dimensi) seperti yang sedang ditampilkan. Nilai-nilai negatif dapat diterima jika elemen saat ini di luar layar (telah digulirkan).

Ini untuk aplikasi iPad (WebKit / WebView). Setiap kali pengguna mengetuk tautan khusus dalam UIWebView, saya seharusnya membuka tampilan popover yang menampilkan informasi lebih lanjut tentang tautan tersebut. Tampilan popover perlu menampilkan panah yang menunjuk kembali ke bagian layar yang memanggilnya.

Jawaban:


264

Awalnya, ambil posisi .offset elemen dan hitung posisi relatifnya sehubungan dengan jendela

Lihat :
1. offset
2. gulir
3. scrollTop

Anda bisa mencobanya di biola ini

Mengikuti beberapa baris kode menjelaskan bagaimana ini dapat diselesaikan

ketika acara .scroll dilakukan, kami menghitung posisi relatif elemen sehubungan dengan objek jendela

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

ketika gulir dilakukan di browser, kami memanggil fungsi event handler di atas

cuplikan kode


function log(txt) {
  $("#log").html("location : <b>" + txt + "</b> px")
}

$(function() {
  var eTop = $('#element').offset().top; //get the offset top of the element
  log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

  $(window).scroll(function() { //when window is scrolled
    log(eTop - $(window).scrollTop());
  });
});
#element {
  margin: 140px;
  text-align: center;
  padding: 5px;
  width: 200px;
  height: 200px;
  border: 1px solid #0099f9;
  border-radius: 3px;
  background: #444;
  color: #0099d9;
  opacity: 0.6;
}
#log {
  position: fixed;
  top: 40px;
  left: 40px;
  color: #333;
}
#scroll {
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

<div id="element">Hello
  <hr>World</div>
<div id="scroll">Scroll Down</div>


1
Terima kasih untuk skripnya. Tampaknya ini berfungsi di desktop tetapi tidak berfungsi di iPad. Tampaknya $ (window) .scrollTop () dan $ (window) .scrollLeft () tidak diperbarui di iPad. Anda dapat mencoba versi saya melalui jsbin.com/ogiwu4/5
adib

2
Mereka tidak diperbarui di iPad karena jendela itu sendiri tidak menggulir - pengguna sedang menggulir di dalam jendela. Itu yang terjadi untuk situs web dasar, tidak yakin tentang yang menargetkan perangkat seluler, mungkin memiliki lebih banyak opsi di sana.
eselk

Ini akan gagal ketika suatu elemen berada di dalam elemen yang dapat digulir lainnya, e. g. <div>. Anda hanya mempertimbangkan pengguliran dokumen tetapi bukan pengguliran elemen lainnya.
siapaoe

71

Coba kotak pembatas. Itu mudah:

var leftPos  = $("#element")[0].getBoundingClientRect().left   + $(window)['scrollLeft']();
var rightPos = $("#element")[0].getBoundingClientRect().right  + $(window)['scrollLeft']();
var topPos   = $("#element")[0].getBoundingClientRect().top    + $(window)['scrollTop']();
var bottomPos= $("#element")[0].getBoundingClientRect().bottom + $(window)['scrollTop']();

7
getBoundingClientRect () adalah jawaban untuk masalah ini. Pemrogram terima kasih.
Vlad Lego

1
ini bekerja dengan baik. Saya hanya perlu memasukkan beberapa kode untuk memperbaiki gulir saya, selain scrollLetf dan scrollTop Anda: topPos = topPos - $ (window) .scrollTop (); leftPos = leftPos - $ (window) .scrollLeft (); rightPos = rightPos - $ (window) .scrollTop (); bottomPos = bottomPos - $ (window) .scrollLeft ();
Cesar

1
hari ketika orang akan belajar untuk membungkus hal-hal dalam metode berguna yang bagus
mmm

@Noldorin Dukungan pada IE / Ujung terlihat baik dengan saya: caniuse.com/#feat=getboundingclientrect
prograhammer

1
@prograhammer Kasihan saya, Anda benar. Saya membaca ini di beberapa situs web dan mengambil kata pada nilai nominal ... ternyata itu salah (atau paling tidak hanya tidak bekerja pada IE lama).
Noldorin

6
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 untuk IE hanya sesuai kebutuhan saya tetapi serupa dapat dilakukan untuk browser lain


4

Ini terdengar seperti Anda ingin tooltip untuk tautan yang dipilih. Ada banyak tooltips jQuery, cobalah qtip jQuery . Ini memiliki banyak pilihan dan mudah untuk mengubah gaya.

Kalau tidak, jika Anda ingin melakukan ini sendiri, Anda dapat menggunakan jQuery .position(). Informasi lebih lanjut tentang .position()ada di http://api.jquery.com/position/

$("#element").position(); akan mengembalikan posisi elemen saat ini ke induk offset.

Ada juga jQuery .offset (); yang akan mengembalikan posisi relatif ke dokumen.


2
Ini sebenarnya bukan tooltip, tetapi untuk membuka widget UI asli untuk menambahkan anotasi.
adib


1
    function trbl(e, relative) {
            var r = $(e).get(0).getBoundingClientRect(); relative = $(relative);

            return {
                    t : r.top    + relative['scrollTop'] (),
                    r : r.right  + relative['scrollLeft'](),
                    b : r.bottom + relative['scrollTop'] (),
                    l : r.left   + relative['scrollLeft']() 

            }
    }

    // Example
    trbl(e, window);

1

Coba ini untuk mendapatkan lokasi elemen relatif ke jendela.

        $("button").click(function(){
            var offset = $("#simplebox").offset();
            alert("Current position of the box is: (left: " + offset.left + ", top: " + offset.top + ")");
        });
    #simplebox{
        width:150px;
        height:100px;
        background: #FBBC09;
        margin: 150px 100px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Get Box Position</button>
    <p><strong>Note:</strong> Play with the value of margin property to see how the jQuery offest() method works.</p>
    <div id="simplebox"></div>

Lihat lebih lanjut @ Dapatkan posisi elemen relatif ke dokumen dengan jQuery

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.