jQuery pencereye göre bir elemanın konumunu alır


168

Bir HTML DOM kimliği verildiğinde, bir öğenin JavaScript / JQuery'deki pencereye göre konumu nasıl alınır? Öğe, iframe'in veya başka bazı öğelerin içinde olabileceğinden, bu belge veya ofset ebeveyni ile aynı değildir. Şu anda görüntüleniyor gibi öğenin dikdörtgen (konum ve boyut olarak) ekran konumunu almak gerekiyor. Eleman şu anda ekran dışındaysa (kaydırılmışsa) negatif değerler kabul edilebilir.

Bu bir iPad (WebKit / WebView) uygulaması içindir. Kullanıcı özel bir bağlantıya dokunduğunda, bağlantı UIWebViewhakkında daha fazla bilgi görüntüleyen bir popover görünümü açmam gerekiyor. Popover görünümünde, ekranın onu çağıran kısmını gösteren bir ok görüntülenmelidir.

Yanıtlar:


264

Başlangıçta, elemanın .offset konumunu tutun ve pencereye göre göreceli konumunu hesaplayın

Bakınız :
1. ofset
2. kaydırma
3. scrollTop

Bu kemanda deneyebilirsiniz

Aşağıdaki birkaç satır kod, bunun nasıl çözülebileceğini açıklar

zaman .scroll olay gerçekleştirilir, pencereyi nesneye göre elemanının görece konumunu hesaplamak

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

tarayıcıda kaydırma yapıldığında yukarıdaki olay işleyici işlevini çağırıyoruz

kod pasajı


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
Senaryo için teşekkürler. Bu masaüstünde çalışıyor gibi görünüyor, ancak iPad'de çalışmıyor. $ (Window) .scrollTop () ve $ (window) .scrollLeft (), iPad'de güncellenmiyor gibi görünüyor. Sürümümü jsbin.com/ogiwu4/5
adib

2
İPad'in kendisi güncellenmiyor çünkü pencere kendiliğinden kaymıyor - kullanıcı pencerenin içinde dolaşıyor. Yine de temel bir web sitesi için durum böyle, mobil cihazları hedefleyen bir web sitesi hakkında muhtemelen daha fazla seçenek var.
eselk

Bir eleman başka bir kaydırılabilir eleman içindeyse, bu başarısız olmalıdır, e. g. <div>. Yalnızca belge kaydırmayı düşünürsünüz, diğer öğeyi kaydırmazsınız.
ygoe

71

Sınırlayıcı kutuyu deneyin. Basit:

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 () bu sorunun cevabıdır. Teşekkürler prograhammer.
Vlad Lego

1
bu iyi çalıştı. Ben sadece scrollLetf ve scrollTop ek olarak, benim kaydırma düzeltmek için bazı kod eklemek zorunda kaldı: topPos = topPos - $ (pencere) .scrollTop (); leftPos = leftPos - $ (pencere) .scrollLeft (); rightPos = rightPos - $ (pencere) .scrollTop (); bottomPos = bottomPos - $ (pencere) .scrollLeft ();
Cesar

1
insanların güzel ve yararlı bir yöntemle işleri tamamlamayı öğrenecekleri gün
mmm

@Noldorin IE / Edge'deki destek bana iyi geliyor: caniuse.com/#feat=getboundingclientrect
prograhammer

1
@prograhammer Benim hatam, haklısın. Ben bazı web sitesinde bu okumak ve sözünü yüz değeri aldı ... yanlış (ya da en azından sadece eski IE üzerinde çalışmıyor) çıkıyor.
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;
    };

buna böyle diyebilirsin

getWindowRelativeOffset(top, inputElement);

IE için sadece gereksinimime göre odaklanıyorum, ancak benzer diğer tarayıcılar için yapılabilir


4

Bu daha çok, seçilen bağlantı için bir ipucu istediğiniz gibi görünür. Birçok jQuery araç ipucu var , jQuery qTip'i deneyin . Birçok seçeneği vardır ve stilleri değiştirmek kolaydır.

Aksi takdirde bunu kendiniz yapmak isterseniz jQuery kullanabilirsiniz .position(). Daha fazla bilgi yaklaşık .position()üzerindedir http://api.jquery.com/position/

$("#element").position(); bir öğenin ofset üst öğesine göre geçerli konumunu döndürür.

Ayrıca jQuery .offset (); bu, belgeye göre konumu döndürür.


2
Bu gerçekten bir araç ipucu değil, ek açıklamalar eklemek için yerel bir UI widget'ı açmak için.
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

Bir öğenin pencereye göre konumunu almak için bunu deneyin.

        $("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>

Daha fazlasını görün @ jQuery ile bir öğenin belgeye göre konumunu alma

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.