javascript - Bir sayfanın dikey kaydırma çubuğu olup olmadığını nasıl tespit ederim?

Sadece mevcut sayfada/pencerede (belirli bir öğe değil) dikey bir kaydırma çubuğu olup olmadığını kontrol etmek için basit bir JQ/JS istiyorum.

Google'da aramak bana sadece bu temel özellik için aşırı karmaşık görünen şeyler veriyor.

Bu nasıl yapılabilir?

Cevap #1

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

Cevap #2

bunu dene:

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

Ancak bu yalnızca dikey scrollHeight'in görüntülenebilir içeriğin yüksekliğinden büyük olup olmadığını size söyleyecektir. hasVScroll değişkeni doğru veya yanlış değerini içerecektir.

Daha ayrıntılı bir kontrol yapmanız gerekiyorsa, yukarıdaki koda şunu ekleyin:

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

Cevap #3

Önceki cevabı denedim ve işe yaramıyor gibi görünüyor; $("body").height() mutlaka tüm html yüksekliğini temsil etmiyor.

Çözümü şu şekilde düzelttim:

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
}

Cevap #4

let hasScrollbar = window.innerWidth > document.documentElement.clientWidth;

Cevap #5

Bu soruyu ölülerden geri getirelim ;) Google'ın size basit bir çözüm sunmamasının bir nedeni var. Özel durumlar ve tarayıcı tuhaflıkları hesaplamayı etkiler ve göründüğü kadar basit değildir.

Ne yazık ki, şu ana kadar burada özetlenen çözümlerle ilgili sorunlar var. Onları küçümsemek istemiyorum - harika başlangıç noktaları ve daha sağlam bir yaklaşım için gereken tüm temel özelliklere değiniyorlar. Ama diğer cevaplardaki kodları kopyalayıp yapıştırmanızı önermem çünkü

  • Onlar, konumlandırılmış içeriğin etkisini tarayıcılar arasında güvenilir bir şekilde yakalamaz. Gövde boyutuna dayanan cevaplar bunu tamamen kaçırır (gövde, böyle bir içeriğin offset ebeveyni değildir, kendisi konumlandırılmış olmadığı sürece). Ve $(document).width() ve .height() kontrol eden cevaplar, jQuery'nin belge boyutunu algılama hatasına kurban gider.
  • window.innerWidth’e güvenmek, tarayıcı bunu destekliyorsa, mobil tarayıcılarda kaydırma çubuklarını algılamada kodunuzun çalışmamasına neden olur; burada kaydırma çubuğunun genişliği genellikle 0’dır. Kaydırma çubukları yalnızca geçici olarak bir üst üste biniş gibi gösterilir ve belgede yer kaplamazlar. Mobilde yakınlaştırma da bu şekilde bir sorun haline gelir (uzun bir hikaye).
  • Tespit, insanların hem html hem de body öğesinin taşmasını açıkça varsayılan olmayan değerlere ayarladığında yanıltılabilir (o zaman ne olduğu biraz karmaşıktır - bu açıklamaya bakın).
  • Çoğu cevaptaki gövde dolgusu, kenarlıklar veya boşluklar tespit edilmez ve sonuçları bozar.

Bir çözüm bulmak için hayal ettiğimden daha fazla zaman harcadım, bunu sadece "çalışıyor" hale getirmek için (öksürük). Oluşturduğum algoritma artık bir eklentinin parçası, jQuery.isInView, ve bir .hasScrollbar yöntemi sunuyor. İsterseniz kaynağa bir göz atın.

Sayfanın tam kontrolüne sahip olduğunuz ve bilinmeyen CSS ile uğraşmak zorunda olmadığınız bir senaryoda, bir eklenti kullanmak aşırı olabilir - sonuçta hangi uç durumların geçerli olduğunu ve hangilerinin geçerli olmadığını siz biliyorsunuz. Ancak, bilinmeyen bir ortamda güvenilir sonuçlara ihtiyacınız varsa, burada özetlenen çözümlerin yeterli olacağını sanmıyorum. İyi test edilmiş bir eklenti kullanmanız daha iyi olur - benimki veya başkasının.

Cevap #6

Bu benim için işe yaradı:

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> window.innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight > 
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}

Gövde için, sadece hasVerticalScroll() kullanın.

İlgili makaleler