Bir belgenin kaydırma konumunu nasıl elde ederim?

82

Bir belgenin kaydırma konumu değeri nasıl alınır?

jquery scroll

— Birisi
kaynak

46

$(document).height() //returns window height

$(document).scrollTop() //returns scroll position from top of document

— Bob Gregor
kaynak

Ben de aynı şekilde düşünüyordum, ama neden console.log ($ (this) .scrollTop ()) = 1187 console.log ($ (this) .height ()) = 1762 bu kadar farklı? Sayfanın altına kaydırırsam 575px için. Bu 575px nereye gitti? Kaydırma çubuğu 576 piksel olamaz :)

— Biri

3

Baaah yine benim hatam. Firebug penceresi açık olan kaydırma çubuğuna bakıyordum. Ofc şimdi 576 piksel olabilir. :) Teşekkürler sanırım konu kapandı.

— Biri

101

-1 - Bu çok güzel, ama hakkındaki soruya cevap vermiyor scrollHeight.

— Wayne

8

Doğru, bu bir jquery sorusu. Ancak ne $ (document) .height () ne de $ (document) .scrollTop () istenen bilgiyi vermiyor. İstek, scrollHeight içindi. ScrollHeight değeri, bir öğenin kullanabileceği toplam yüksekliktir (kaydırılabilirse, bu değer yüksekliğinden daha büyük olabilir). scrollTop, öğenin tepeden ne kadar uzakta olacağını döndürür. Mevcut toplam yüksekliğin ne olduğunu da yanıtlamayın. Bkz help.dottoro.com/ljbixkkn.php scrollHeight ait anlamak için

— teynon

4

Bu yanıt olarak işaretlenmiştir çünkü soruyu soranın, belgenin o anda kaydırıldığı yükseklikle ilgili olan amaçlanan sorusunu yanıtlar ... ergo "scrollHeight". Bu ismin farklı bir bağlamda kullanılması bir tesadüf.

— Chase Sandmann

177

scrollHeightJQuery seçici kullanılarak elde edilen bir öğenin nasıl elde edileceği aşağıda açıklanmıştır :

$(selector)[0].scrollHeight

Eğer selectorelemanın (örneğin kimliği olan elemId), dizinin 0-endeksli öğe seçmek istediğiniz eleman olacak ve bu garanti scrollHeightdoğru olacaktır.

— Demwis
kaynak

12

— Dikkatli

2

@Tomas ile mutabık kalınarak, tarayıcılar arası tuhaflıkları daha iyi ele almak için jQuery'nin soyutlamasını kullanın. Örneğin, yukarıdakiler $ (selector) .offset () olarak değiştirilebilir. Top

— Bob Gregor

3

$ (Document) .offset () değeri null döndürmez ve .offset () 'in tarayıcının kaydırma çubuklarının konumuyla hiçbir ilgisi yoktur (.offset () öğelerin belgeye göre koordinatlarını döndürür). Mümkün olduğunda jQuery'yi kullanmamız gerektiğini kabul ediyorum, ancak görünüşe göre, bunun için çapraz tarayıcı desteği olmadığından, jQuery bunun için bir soyutlama sağlamıyor.

— BrainSlugs83

2

Ayrıca $ (selector) .get (0) .scrollHeight

— Ally

1

@Dmitri Zaitsev .scrollHeight bir jQuery özelliği değil, bir DOM düğümü özelliğidir.

— Zemljoradnik

45

Jquery 1.6 veya üstünü kullanıyorsanız, değere erişmek için prop kullanın.

$(document).prop('scrollHeight')

Önceki sürümler değeri attr'den alıyordu ancak 1.6 yazıyordu.

— Ankit
kaynak

12

Bu, $ (document) .attr ("scrollHeight") gibi jQuery 1.7.1 ile benim için "tanımsız" değerini döndürür.

— Michael

5

Bunun nedeni vücut unsurunun eksik olmasıdır. $ (Document.body) .prop ('scrollHeight') olması gerekir - bu noktada sadece document.body.scrollHeight'ı da kullanabilirsiniz;

— goddogsrunning

6

document.getElementById("elementID").scrollHeight

$("elementID").scrollHeight

— Sachin R
kaynak

öyleyse belge nesnenizin öğe kimliği nedir? ... belki "document.body.scrollHeight" demek istediniz?

— BrainSlugs83

2

$ ('# galeri']. scrollHeight bana tanımsız veriyor // # galeri taşmamın kimliği: otomatik öğe, çalışmıyor

— Anmol Saraf

6

HTML DOM Öğelerini kullanır, ancak jQuery seçiciyi kullanmaz. Şu şekilde kullanılabilir:

var height = document.body.scrollHeight;

— su
kaynak

3

Bunun gibi bir şey sorununuzu çözmelidir:

$.getDocHeight = function(){
     var D = document;
     return Math.max(Math.max(D.body.scrollHeight,    D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};

alert( $.getDocHeight() );

Not: İhtiyaç duyduğunuz her an bu işlevi arayın, uyarı test amaçlıdır.

— Zuul
kaynak

Nedense bu işlev benim için düzgün çalışmıyor; bir iframe içinde kullanma. <html> gerçek yüksekliği 256px, bu fonksiyon bana 337px veriyor ve nereden geldiği hakkında hiçbir fikrim yok. Not: Chrome 18 kullanıyorum.

— jurchiks

@jurchiks: Bir göz atmam için bu iframe'in nerede olduğuna dair bir bağlantınız var mı?

— Zuul

blade.dateks.lv/salidzinat?ids=58664,43586 . Soru işaretlerinden herhangi birine tıklayın. Çoğunu düzeltmeyi başardım, ancak bunlardan ikisinin (ve karşılaştırılan öğelere bağlı olarak daha fazlası var) hala altta biraz garip, gizemli ~ 20px marjı var. Pencereyi yeniden boyutlandırdığımda kayboluyor, çünkü pencere yeniden boyutlandırıldığında açılır pencere boyutlarını değiştirmesini sağladım.

— jurchiks

3

Pencere kaydırma çubuğu tarafından kaydırılan alanların gerçek kaydırılabilir yüksekliğini elde etmek için kullandım $('body').prop('scrollHeight'). Bu, en basit çalışan çözüm gibi görünüyor, ancak uyumluluk için kapsamlı bir şekilde kontrol etmedim. Emanuele Del Grande, bunun muhtemelen 8'in altındaki IE için işe yaramayacağı başka bir çözüme dikkat çekiyor.

Diğer çözümlerin çoğu kaydırılabilir öğeler için iyi çalışıyor, ancak bu tüm pencere için çalışıyor. Bilhassa, Ankit'in çözümü için Michael ile aynı sorunu yaşadım, yani $(document).prop('scrollHeight')geri dönüyor undefined.

— Acjay
kaynak

1

Bunu dene:

var scrollHeight = $(scrollable)[0] == document ? document.body.scrollHeight : $(scrollable)[0].scrollHeight;

— Dmitry Komin
kaynak

0

Bunu deneyebilirsiniz, örneğin, bu kod kaydırma çubuğunu tüm DIV etiketleri için en alta yerleştirir

Unutmayın: jQuery, bağımsız değişken olarak değeri yerine bir işlevi kabul edebilir. "this", jQuery tarafından işlenen nesnedir, işlev geçerli DIV "this" öğesinin scrollHeight özelliğini döndürür ve bunu belgedeki tüm DIV için yapar.

$("div").scrollTop(function(){return this.scrollHeight})

— Steve
kaynak