offsetTop ile jQuery.offset (). top

Bunu okudum offsetLeftve offsetToptüm tarayıcılarda düzgün çalışmıyorum. jQuery.offset()xbrowser'ın doğru değerini sağlamak için bunun için bir soyutlama sağlaması gerekiyor.

Yapmaya çalıştığım şey, öğenin sol üst kısmına göre bir öğenin tıklandığı yerin koordinatlarını almak.

Sorun şu ki jQuery.offset().topbana FFX 3.6'da ondalık bir değer veriyor (IE ve Chrome'da iki değer eşleşiyor).

Bu keman sorunu gözler önüne seriyor. Alttaki resme jQuery.offset().toptıklarsanız 327.5 döndürür, ancak offsetTop328 döndürür.

Bunun offset()doğru değeri döndürdüğünü düşünmek istiyorum ve tarayıcılarda çalışacağı için kullanmalıyım. Ancak, insanlar ondalık pikselleri tıklayamazlar. Math.round()JQuery'nin döndürdüğü uzaklık için gerçek uzaklığı belirlemenin doğru yolu mudur ? Bunun offsetTopyerine mi yoksa tamamen başka bir yöntem mi kullanmalıyım?

İnsanların yarım pikselleri tıklayamayacağını söyleyerek haklı olduğunuzu düşünüyorum, bu yüzden şahsen yuvarlak jQuery ofset kullanırım ...

JQuery API Dokümanının söylediği şey şudur .offset():

Belgeye göre eşleşen öğeler kümesindeki ilk öğenin geçerli koordinatlarını alın veya her öğenin koordinatlarını ayarlayın .

MDN Web API'nin söylediği şey şudur .offsetTop:

offsetTop, geçerli elemanın uzaklığın tepesine göre mesafesini verir

Koordinatları .offset()alırken jQuery v.1.11'in temelde yaptığı şey budur :

var box = { top: 0, left: 0 };

// BlackBerry 5, iOS 3 (original iPhone)
if ( typeof elem.getBoundingClientRect !== strundefined ) {
  box = elem.getBoundingClientRect();
}
win = getWindow( doc );
return {
  top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
  left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
};

• pageYOffset sezgisel olarak sayfanın ne kadar kaydırıldığını söylüyor
• docElem.scrollTop IE <9 için yedek (BTW, jQuery 2'de desteklenmez)
• docElem.clientTop bir öğenin üst kenarlığının genişliğidir (bu durumda belge)
• elem.getBoundingClientRect()koordinatları belge görünüm alanına göre alır (yorumlara bakın). Kesir değerlerini döndürebilir, bu nedenle hatanızın kaynağı budur. Ayrıca , sayfa yakınlaştırıldığında IE <8'de bir hataya neden olabilir . Kesir değerlerinden kaçınmak için konumu yinelemeli olarak hesaplamaya çalışın

Sonuç

• Ana düğüme göre koordinatlar istiyorsanız , kullanın element.offsetTop. element.scrollTopEbeveyn kaydırmayı hesaba katmak istiyorsanız ekleyin . (veya bu kitaplığın hayranıysanız jQuery .position () kullanın)
• Eğer göreli Coords istiyorsanız viewport kullanımı element.getBoundingClientRect().top. window.pageYOffsetBelge kaydırmayı hesaba katmak istiyorsanız ekleyin . Belge en çıkarmak gerekmez clientTopbelge hiçbir sınır vardır eğer göre konum var, bu yüzden (genellikle öyle değil) belgesinde
• element.clientTopÖğe kenarlığını öğenin bir parçası olarak görmüyorsanız çıkarın

Bunu dene: parseInt(jQuery.offset().top, 10)

Mümkündür offsetkullanarak, bir tam sayı olmayan olabilir emölçüm birimi göreli olarak font-sizesin %.

Ayrıca, offsetolmadığında bir tam sayı zoomolmayabileceğini, 100%ancak tarayıcının ölçeklemeyi nasıl ele aldığına bağlı olduğunu da teorileştiriyorum.

Tüm tarayıcılarda parseInt(jQuery.offset().top)her zaman Tamsayı (ilkel - int) değerini kullanmak için kullanabilirsiniz .