View of Sayfanın Üstü ile ilgili olarak Div'in Konumu

Question

Javascript'teki bir pencereden pencerenin üstüne piksel miktarını (veya genel olarak ölçmeyi) nasıl alabileceğimi merak ediyorum. Belge ile ilgili olarak, sadece tarayıcının görüntülendiği yere göre bir sapma y arıyorum. "Cevapladım" çözümünü burada denedim: Is it possible to get the position of div within the browser viewport? Not within the document. Within the window, ama en azından Safari'de, divun gerçekte nerede olursanız olun aynı sayıyı döndürdüğü bir soruna giriyorum.

Yardımlarınız için teşekkürler!

Answer 1

Mevcut cevaplar artık güncel değil. getBoundingClientRect() metodu, uzunca bir süredir etrafta dolaşıyor ve bu sorunun tam olarak ne istediğini yapıyor. Ayrıca tüm tarayıcılarda desteklenir.

this MDN sayfasından:

döndürülen değer üstü bıraktı ile salt okunur sağ ve alt özellikleri piksel olarak sınır-box, anlatan, sol üst içerir bir TextRectangle nesnesidir numaralı görünümün sol üst köşesine göre.

Öyle gibi kullanabilirsiniz:

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

Answer 2

JS Çerçevelerinin neler sunabileceğine bakın. Çoğunlukla, tarayıcıya özgü sorunların ve özelliklerin tümünü - veya en azından - çoğunu çözmüşlerdir.

Prototip'te, scrollOffset() işlevleri vardır. JQuery ile sizi doğru manüel sayfaya yönlendirecek kadar tanıdık değilim ama here doğru yöne doğru giden bir sorudur.

Answer 3

Bu answer, belgenin kökeni (sol üst) bakımından bir öğenin x ve y koords'larını nasıl alacağınızı anlatır. Yalnızca piksellerden görüntülemenin div görünümüne kadar olan uzaklığını elde etmek için .scrollTop değerini y koordinatına eklemeniz gerekir.

Answer 4

ben biraz shearshed ve bu tespit ettik: o yardımcı olabilir

function getOffsetPosition(el_id, side){ 
element = document.getElementById(el_id); 

newNode = document.createElement("div"); 
newNode.innerHTML = "<div style=\"height: 12px;\"></div>"; 
element.insertBefore(newNode, element.firstChild); 

iVal = 0; 
oObj = element; 
var sType = "oObj.offset"+side; 
while (oObj && oObj.tagName != "html") { 
iVal += eval(sType); 
oObj = oObj.offsetParent; 
} 
element.removeChild(newNode); 
return iVal; 
} 

Eğer

^^

Answer 5

// İlk tarayıcısı

(function(){ 
Run= window.Run || {}; 
if(window.pageYOffset!= undefined){ 
    Run.topLeftScroll= function(hoo){ 
    var wo= [window.pageXOffset, window.pageYOffset] 
    if(hoo && hoo.nodeType== 1){ 
    hoo= mr(hoo); 
    var T= 0, L= 0; 
    while(hoo){ 
    L+= hoo.offsetLeft; 
    T+= hoo.offsetTop; 
    hoo= hoo.offsetParent; 
    } 
    wo= [L, T, wo[0], wo[1]]; 
    } 
    return wo; 
    } 
} 
else if(document.body.scrollTop!== undefined){ 
    Run.topLeftScroll= function(hoo){ 
    var B= document.body; 
    var D= document.documentElement; 
    D= (D.clientHeight)? D: B; 
    wo= [D.scrollLeft, D.scrollTop]; 
    if(hoo && hoo.nodeType== 1){ 
    hoo= mr(hoo); 
    var T= 0, L= 0; 
    while(hoo){ 
    L+= hoo.offsetLeft; 
    T+= hoo.offsetTop; 
    hoo= hoo.offsetParent; 
    } 
    wo= [L, T, wo[0], wo[1]]; 
    } 
    return wo; 
    } 
} 
})() 

için doğru geometriyi olsun // kısayol işlevi

if(window.Run && Run.topLeftScroll){ 
Run.getPosition= function(who, wch){ 
    var A= Run.topLeftScroll(who); 
    if(!wch) return A; 
    switch(wch.toUpperCase()){ 
    case 'X': return A[0];// element Left in document 
    case 'Y': return A[1];// element Top in document 
    case 'L': return A[0]-A[2];// Left minus scroll 
    case 'T': return A[1]-A[3];// Top minus scroll 
    case 'SL': return A[2];// scroll Left 
    case 'ST': return A[3];// scroll Top 
    default: return 0; 
    } 
    // all returns are integers (pixels) 
} 
}