Controlla se l'elemento HTML ha barre di scorrimento

Qual è il modo più veloce per verificare se un elemento ha barre di scorrimento?

Una cosa ovviamente è controllare se l'elemento è più grande della sua finestra, che può essere facilmente fatto controllando questi due valori:

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

ma questo non significa che abbia anche le barre di scorrimento (quindi può effettivamente essere fatto scorrere dagli umani).

Domanda

Come posso verificare la presenza di barre di scorrimento in 1 browser incrociato e 2 solo javascript (come in nessun jQuery )?

Solo Javascript, perché ho bisogno del minor overhead possibile, perché mi piacerebbe scrivere un filtro selettore jQuery molto veloce

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

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

Suppongo che dovrei controllare overflow impostazioni di stile, ma come posso farlo in modo cross browser?

Modifica aggiuntiva

Non solo overflowimpostazioni di stile. Controllare se un elemento ha una barra di scorrimento non è così banale come sembra. La prima formula che ho scritto sopra funziona bene quando l'elemento non ha un bordo, ma quando lo fa (specialmente quando il bordo è di larghezza considerevole), la offsetdimensione può essere più grande della scrolldimensione ma l'elemento può ancora essere scorrevole. In realtà dobbiamo sottrarre i bordi dalla offsetdimensione per ottenere la visualizzazione scorrevole effettiva dell'elemento e confrontarla conscroll dimensione.

Per riferimento futuro

:scrollableIl filtro selettore jQuery è incluso nel mio .scrollintoview()plugin jQuery. Il codice completo può essere trovato nel mio post sul blog se qualcuno ne ha bisogno. Anche se non ha fornito la soluzione effettiva, il codice di Soumya mi ha notevolmente aiutato a risolvere il problema. Mi ha indirizzato nella giusta direzione.

L'ho trovato da qualche parte un paio di settimane fa. Ha funzionato per me.

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

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

/* you'll get true/false */

Provare:

Per barra di scorrimento verticale

el.scrollHeight> el.clientHeight

Per barra di scorrimento orizzontale

el.scrollWidth> el.clientWidth

So che funziona almeno per IE8 e Firefox 3.6+.

Questo può sembrare (o essere) un po 'hacker, ma potresti testare le proprietà scrollTope scrollLeft.

Se sono maggiori di 0, sai che ci sono barre di scorrimento. Se sono 0, impostali su 1 e provali di nuovo per vedere se ottieni un risultato di 1. Quindi reimpostali su 0.

Esempio: 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'));

Credo che ci sia una proprietà diversa per IE, quindi la aggiornerò tra un minuto.

MODIFICARE: appare come se IE potesse supportare questa proprietà. (Non posso testare IE in questo momento.)

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

Ecco un'altra soluzione:

Come alcune persone hanno sottolineato, il semplice confronto tra offsetHeight e scrollHeight non è sufficiente poiché differiscono su elementi con overflow nascosto, ecc., Che ancora non hanno le barre di scorrimento. Quindi qui sto anche controllando se l'overflow è scroll o auto sugli stili calcolati per l'elemento:

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,
  };
}

Forse sono un po 'in ritardo per la festa, ma ...

Credo che tu possa rilevare le barre di scorrimento con e.offsetWidth rispetto a e.clientWidth. La larghezza dell'offset include bordi e barre di scorrimento, spaziatura interna e larghezza. La larghezza del cliente include imbottitura e larghezza. Perfavore guarda:

https://developer.mozilla.org/en/DOM/element.offsetWidth (seconda immagine) https://developer.mozilla.org/en/DOM/element.clientWidth (seconda immagine)

Devi controllare:

1. Indica se l'elemento ha o meno overflow impostato su auto / scroll (incluso overflowX / Y) utilizzando lo stile calcolato / a cascata / corrente.
2. Se l'elemento ha overflow impostato su auto / scroll. Stabilire offsetWidth e clientWidth.
3. Se clientWidth è inferiore a offsetWidth - bordo destro (trovato di nuovo attraverso lo stile calcolato / a cascata / corrente), allora sai di avere una barra di scorrimento.

Fai lo stesso per la verticale (offset / clientHeight).

IE7 riporta un clientHeight di 0 per alcuni elementi (non ho verificato perché), quindi è sempre necessario il primo controllo di overflow.

Spero che questo ti aiuti!

Ci sono diversi problemi in caso di verifica dell'esistenza delle barre di scorrimento, uno dei quali è che in mac non hai alcuna barra di scorrimento visibile, quindi entrambe le soluzioni sopra non ti darebbero una risposta accurata.

Quindi, poiché il rendering del browser non è molto frequente, puoi controllare lo scorrimento con la modifica dello scorrimento e quindi reimpostarlo:

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;
};

Sto solo scherzando qui perché nessuna delle soluzioni di cui sopra ha funzionato per me (finora). Ho riscontrato un certo successo confrontando l'altezza di scorrimento di un Div con il suo offsetHeight

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

Sembra che mi dia un accurato confronto ... finora. Qualcuno sa se questo è legittimo?

Per IE11 (Internet Explorer 11) ho dovuto modificare la logica in:

// 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;

Questo perché IE riporta scrollHeight come 1 più grande di clientHeight quando non è presente alcuna barra di scorrimento ma circa 9 più grande quando è presente una barra di scorrimento

Se hai bisogno di sapere se è presente una barra di scorrimento per l'intera pagina web e con il supporto completo del browser puoi usare questo:

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

È importante da usare al window.innerHeightposto di document.body.clientHeightperché in alcuni browser mobili clientHeight non otterrà le dimensioni della barra degli indirizzi ma scrollHeight lo farà, quindi si ottengono calcoli sbagliati.

nessuna di queste risposte è corretta. devi usare questo:

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

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

Aggiungi un elemento largo 100% al suo interno. Quindi imposta l'overflow su nascosto. Se lo stile calcolato dell'elemento (da jQ) cambia, il genitore aveva una barra di scorrimento.

EDIT: Sembra che tu voglia un metodo cross browser come getComputedStyle . Provare:

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