HTML öğesinin kaydırma çubuklarına sahip olup olmadığını kontrol edin

Bir öğenin kaydırma çubuklarına sahip olup olmadığını kontrol etmenin en hızlı yolu nedir?

Elbette bir şey, öğenin görüntü alanından daha büyük olup olmadığını kontrol etmektir; bu, bu iki değeri kontrol ederek kolayca yapılabilir:

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

ancak bu, kaydırma çubuklarına sahip olduğu anlamına gelmez (yani aslında insanlar tarafından kaydırılabilir).

Soru

Kaydırma çubuklarını 1 çapraz tarayıcıda ve 2 javascript'te ( jQuery olmadığı gibi ) nasıl kontrol ederim ?

Yalnızca Javascript, çünkü olabildiğince küçük ek yüke ihtiyacım var, çünkü çok hızlı bir jQuery seçici filtresi yazmak istiyorum

// check for specific scrollbars
$(":scrollable(x/y/both)")

// check for ANY scrollbar
$(":scrollable")

Sanırım overflowstil ayarlarını kontrol etmem gerekecek ama bunu tarayıcılar arası bir şekilde nasıl yapabilirim?

Ek düzenleme

Sadece overflowstil ayarları değil . Bir öğenin kaydırma çubuğuna sahip olup olmadığını kontrol etmek göründüğü kadar önemsiz değildir. Yukarıda yazdığım ilk formül, öğenin bir sınırı olmadığında iyi çalışıyor, ancak varsa (özellikle kenarlık önemli ölçüde geniş olduğunda), offsetboyut boyuttan daha büyük olabilir , scrollancak öğe yine de kaydırılabilir. Biz aslında dan sınırları çıkarmak zorunda offsetelemanın gerçek kaydırılabilir viewport almak için boyut ve ile karşılaştırabilirsiniz scrollboyutta.

Gelecekte referans olması için

:scrollablejQuery seçici filtresi, .scrollintoview()jQuery eklentimde yer alıyor. Herhangi birinin ihtiyacı olursa tam kod blog yazımda bulunabilir . Gerçek çözümü sağlamasa da Soumya'nın kodu sorunu çözmeme önemli ölçüde yardımcı oldu. Beni doğru yönü gösterdi.

Bunu birkaç hafta önce bir yerde buldum. Benim için çalıştı.

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* you'll get true/false */

Deneyin:

Dikey kaydırma çubuğu için

el.scrollHeight> el.clientHeight

Yatay kaydırma çubuğu için

el.scrollWidth> el.clientWidth

Bunun en azından IE8 ve Firefox 3.6+ için çalıştığını biliyorum.

Bu biraz zor görünebilir (veya olabilir) , ancak scrollTopve scrollLeftözelliklerini test edebilirsiniz .

0'dan büyüklerse, kaydırma çubukları olduğunu bilirsiniz. 0 ise, onları 1 olarak ayarlayın ve 1 sonucunu alıp almadığınızı görmek için tekrar test edin. Sonra tekrar 0'a ayarlayın.

Örnek: http://jsfiddle.net/MxpR6/1/

function hasScroll(el, direction) {
    direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
    var result = !! el[direction];

    if (!result) {
        el[direction] = 1;
        result = !!el[direction];
        el[direction] = 0;
    }
    return result;
}

alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));

IE için farklı bir özellik olduğuna inanıyorum, bu yüzden bir dakika içinde güncelleyeceğim.

DÜZENLEME: IE bu özelliği destekliyor gibi görünüyor. (IE'yi şu anda test edemiyorum.)

http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx

İşte başka bir çözüm:

Birkaç kişinin de belirttiği gibi, sadece kaydırma çubuğu olmayan taşma gizli vb. Öğelerde farklılık gösterdiklerinden, sadece offsetHeight ve scrollHeight'ı karşılaştırmak yeterli değildir. Bu yüzden, burada ayrıca eleman için hesaplanan stillerde taşmanın kaydırma mı yoksa otomatik mi olduğunu kontrol ediyorum:

var isScrollable = function(node) {
  var overflowY = window.getComputedStyle(node)['overflow-y'];
  var overflowX = window.getComputedStyle(node)['overflow-x'];
  return {
    vertical: (overflowY === 'scroll' || overflowY === 'auto') && node.scrollHeight > node.clientHeight,
    horizontal: (overflowX === 'scroll' || overflowX === 'auto') && node.scrollWidth > node.clientWidth,
  };
}

Belki partiye biraz geç kaldım ama ...

E.offsetWidth ve e.clientWidth ile kaydırma çubuklarını tespit edebileceğinize inanıyorum. Kaydırma genişliği, kenarlıkları ve kaydırma çubuklarını, dolgu ve genişliği içerir. İstemci genişliği, dolgu ve genişliği içerir. Bakınız:

https://developer.mozilla.org/en/DOM/element.offsetWidth (ikinci resim) https://developer.mozilla.org/en/DOM/element.clientWidth (ikinci resim)

Kontrol etmeniz gerekenler:

1. Öğenin hesaplanan / basamaklı / geçerli stil kullanılarak otomatik / kaydırmaya (overflowX / Y dahil) ayarlı olup olmadığı.
2. Öğe taşma otomatik / kaydırmaya ayarlanmışsa. OffsetWidth ve clientWidth değerlerini belirleyin.
3. ClientWidth offsetWidth - right border değerinden daha küçükse (yine hesaplanan / basamaklı / geçerli stilde bulunur), o zaman bir kaydırma çubuğunuz olduğunu bilirsiniz.

Dikey için de aynısını yapın (offset / clientHeight).

IE7, bazı öğeler için 0 olarak bir clientHeight bildiriyor (nedenini kontrol etmedim), bu nedenle her zaman ilk taşma kontrolüne ihtiyacınız var.

Bu yardımcı olur umarım!

Kaydırma çubuklarının varlığını kontrol etme durumunda birkaç sorun vardır, bunlardan biri, Mac'te görünür bir kaydırma çubuğuna sahip olmamanızdır, bu nedenle yukarıdaki tüm çözümlerin her ikisi de size doğru bir cevap vermez.

Bu nedenle, tarayıcının oluşturması çok sık olmadığından, kaydırmayı değiştirerek kaydırmayı kontrol edebilir ve ardından geri ayarlayabilirsiniz:

const hasScrollBar = (element) => {
  const {scrollTop} = element;

  if(scrollTop > 0) {
    return true;
  }

  element.scrollTop += 10;

  if(scrollTop === element.scrollTop) {
    return false;
  }

  // undoing the change
  element.scrollTop = scrollTop;
  return true;
};

Yukarıdaki çözümlerden hiçbiri benim için işe yaramadığı için (şimdiye kadar) burada dolaşıyorum. Bir Div'in kaydırma yüksekliğini ofsetYüksekliği ile karşılaştırarak biraz başarı elde ettim

var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;

Şimdiye kadar bana doğru bir karşılaştırma yapıyor gibi görünüyor. Bunun meşru olup olmadığını bilen var mı?

For IE11 (Internet Explorer 11) mantığı değiştirmek zorunda:

// Subtract 3 (a small arbitrary number) to allow for IE reporting a difference of 1 when no scrollbar is present
var hasVerticalScrollbar = div.scrollHeight - 3 > div.clientHeight;

Bunun nedeni, IE'nin scrollHeight'ı clientHeight'tan 1 büyük, kaydırma çubuğu olmadığında, ancak bir kaydırma çubuğu mevcut olduğunda yaklaşık 9 daha büyük olarak bildirmesidir.

Tüm web sayfası için bir kaydırma çubuğu olup olmadığını bilmeniz gerekiyorsa ve tam tarayıcı desteğiyle bunu kullanabilirsiniz:

const hasScrollbar = document.body.scrollHeight > window.innerHeight

Bunun window.innerHeightyerine kullanmak önemlidir , document.body.clientHeightçünkü bazı mobil tarayıcılarda clientHeight adres çubuğunun boyutunu almaz , ancak scrollHeight alır , bu nedenle yanlış hesaplamalar alırsınız.

bu cevapların hiçbiri doğru değil. bunu kullanmalısın:

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);

İçine% 100 geniş bir eleman ekleyin. Ardından taşmayı gizli olarak ayarlayın. Öğenin hesaplanan stili (jQ'dan) değişirse, üst öğenin bir kaydırma çubuğu vardı.

DÜZENLEME: Görünüşe göre getComputedStyle gibi bir çapraz tarayıcı yöntemi istiyorsunuz . Deneyin:

function getCSS(_elem, _style)
{
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
    else
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
}