2010-04-15 13 views
22

jQuery'yi kullanarak bir DIV'de kaydırma çubuğunun varlığını tespit etmek istiyorum. $('div').scrollTop() kullanmayı düşünüyordum, ancak her iki durumda da kaydırma çubuğu en üstte olduğunda ve hiç kaydırma çubuğu olmadığında 0 değerini döndürüyordu.jQuery kullanılarak bir DIV'de kaydırma çubuğunun varlığı tespit ediliyor mu?

Fikriniz var mı? div üzerinde overflow varsayarsak

+1

http://stackoverflow.com/questions/2571514/is-detecting-scrollbar-presence-with-jquery-still-difficult –

+0

veya http://stackoverflow.com/questions/2059743/detect-elements-overflow adresine bakın. -using-jquery –

+0

@moi_meme +1 bu soruyu şu adrese göndermek için arıyordu: p – fmsf

cevap

45

auto geçerli:

Wrap bir DIV ile büyür içerik, sonra (a eğer algılamak:

var div= document.getElementById('something'); // need real DOM Node, not jQuery wrapper 
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight; 
var hasHorizontalScrollbar= div.scrollWidth>div.clientWidth; 
+0

Bu da çalışıyor. Teşekkürler. Ama benim çözüm örneğimden farklı olarak, Ben gerçek dünyada çalışmak için "IDs" yok, ben jQuery CSS seçicileri kullanarak DIV seçiyorum ... – 7wp

+10

Sonra kullanmak için 'jQueryElement.get (0)' gerçek DOM düğümünden http://api.jquery.com/get. – BalusC

+0

Bu gerçekten yararlı olsa da, herhangi bir jQuery kullanmıyor olduğundan bu doğru cevap mı? –

-1

Eh aşağıdakileri yaparak çözüm bulunmasının sona erdi dikey) kaydırma çubuğu wrapperDiv yüksekliğini containerDiv yüksekliğiyle karşılaştırarak mevcuttur (içerik çok büyükse kaydırma çubuğuna sahiptir).

wrapperDiv yüksekliği, containerDiv yüksekliğinden daha büyükse, daha küçükse kaydırma çubuğu vardır, sonra kaydırma çubuğu yoktur.

<DIV id="containerDiv" style="width:100px;height:100px;overflow:auto;"> 
    <DIV id="wrapperDiv"> 
     .... content here... 
    </DIV> 
</DIV> 
+0

Bobus'un çözümünü denedin mi? Onun ekstra sarıcı div olmadan çalışacakmış gibi görünüyor. –

+0

, gönderdiğim ikinci bağlantıdan gelen cevap değil miydi? http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery –

+0

Evet, bobince'nin çözümü işe yarayacaktı, ancak yukarıda verdiğim örnekten farklı olarak, aslında çalışmak için "Kimlikler" a sahip değilim. JQuery CSS seçicilerini kullanarak seçiyorum, bu yüzden clientHeight() öğesine erişmek için getElementById kullanamıyorum. artı farklı tarayıcılarda biraz farklı sayılar döndürdüğünden ham .clientHeight değerine güvenmiyorum, değil mi? – 7wp

18
// plugtrade.com - jQuery detect vertical scrollbar function // 
(function($) { 
    $.fn.has_scrollbar = function() { 
     var divnode = this.get(0); 
     if(divnode.scrollHeight > divnode.clientHeight) 
      return true; 
    } 
})(jQuery); 

örnek:

if($('#mydiv').has_scrollbar()) { /* do something */ } 
+2

Bu soruna yönelik diğer birçok örnek/girişimle karşılaştırıldığında mükemmel çözüm. Bunun IE, FF ve Chrome'da çalıştığını doğruladım. – carrabino

0

jQuery

var div= $('#something'); 
var hasVerticalScrollbar= div[0].scrollHeight > div[0].clientHeight; 
var hasHorizontalScrollbar= div[0].scrollWidth > div[0].clientWidth; 

scrollHeight ve scrollWidth DOM özelliklerini Bunun nedeni için soruyorsunuz beri yukarıda belirtilen bobince neyi revize edeceğiz.

İlgili konular