Vérifiez si l'élément HTML a des barres de défilement

Quel est le moyen le plus rapide de vérifier si un élément possède des barres de défilement?

Une chose bien sûr est de vérifier si l'élément est plus grand que sa fenêtre, ce qui peut facilement être fait en vérifiant ces deux valeurs:

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

mais cela ne veut pas dire qu'il a aussi des barres de défilement (donc il peut être fait défiler par les humains).

Question

Comment puis-je vérifier les barres de défilement dans un 1 navigateur croix et 2 javascript seulement (comme dans aucune jQuery ) façon?

Javascript uniquement, car j'ai besoin de la plus petite surcharge possible, car j'aimerais écrire un filtre de sélection jQuery très rapide

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

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

Je suppose que je devrais vérifier les overflowparamètres de style, mais comment puis-je faire cela dans un navigateur croisé?

Modification supplémentaire

Pas seulement les overflowparamètres de style. Vérifier si un élément a une barre de défilement n'est pas aussi simple qu'il n'y paraît. La première formule que j'ai écrite ci-dessus fonctionne bien lorsque l'élément n'a pas de bordure, mais quand c'est le cas (en particulier lorsque la bordure a une largeur considérable), la offsetdimension peut être plus grande que la scrolldimension, mais l'élément peut toujours faire défiler. Nous devons en fait soustraire les bordures de la offsetdimension pour obtenir la fenêtre déroulante réelle de l'élément et la comparer à la scrolldimension.

Pour référence future

:scrollableLe filtre de sélection jQuery est inclus dans mon .scrollintoview()plugin jQuery. Le code complet peut être trouvé dans mon article de blog si quelqu'un en a besoin. Même s'il n'a pas fourni la solution réelle, le code de Soumya m'a considérablement aidé à résoudre le problème. Cela m'a orienté dans la bonne direction.

J'ai trouvé ça quelque part il y a quelques semaines. Cela a fonctionné pour moi.

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

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

/* you'll get true/false */

Essayer:

Pour la barre de défilement verticale

el.scrollHeight> el.clientHeight

Pour la barre de défilement horizontale

el.scrollWidth> el.clientWidth

Je sais que cela fonctionne au moins pour IE8 et Firefox 3.6+.

Cela peut sembler (ou être) un peu hackish, mais vous pouvez tester lescrollTopscrollLeft propriétés et .

S'ils sont supérieurs à 0, vous savez qu'il existe des barres de défilement. S'ils sont 0, définissez-les sur 1 et testez-les à nouveau pour voir si vous obtenez un résultat de 1. Puis remettez-les à 0.

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

Je crois qu'il existe une propriété différente pour IE, donc je vais mettre à jour dans une minute avec cela.

EDIT: Apparaît comme si IE peut prendre en charge cette propriété. (Je ne peux pas tester IE pour le moment.)

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

Voici encore une autre solution:

Comme quelques personnes l'ont souligné, il ne suffit pas de comparer offsetHeight et scrollHeight car ils diffèrent sur les éléments avec le débordement caché, etc., qui n'ont toujours pas de barres de défilement. Donc, ici, je vérifie également si le débordement est scroll ou automatique sur les styles calculés pour l'élément:

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

Je suis peut-être un peu en retard à la fête, mais ...

Je crois que vous pouvez détecter les barres de défilement avec e.offsetWidth contre e.clientWidth. La largeur du décalage comprend les bordures et les barres de défilement, le remplissage et la largeur. La largeur du client comprend le rembourrage et la largeur. S'il te plait regarde:

https://developer.mozilla.org/en/DOM/element.offsetWidth (deuxième image) https://developer.mozilla.org/en/DOM/element.clientWidth (deuxième image)

Vous devez vérifier:

1. Indique si l'élément a un débordement défini sur auto / scroll (y compris overflowX / Y) à l'aide du style calculé / en cascade / actuel.
2. Si l'élément a un débordement défini sur auto / scroll. Définissez offsetWidth et clientWidth.
3. Si clientWidth est inférieur à offsetWidth - bordure droite (retrouvée dans le style calculé / en cascade / actuel), vous savez que vous avez une barre de défilement.

Faites de même pour la verticale (offset / clientHeight).

IE7 signale un clientHeight de 0 pour certains éléments (je n'ai pas vérifié pourquoi), vous avez donc toujours besoin du premier contrôle de dépassement de capacité.

J'espère que cela t'aides!

Il y a plusieurs problèmes en cas de vérification de l'existence de barres de défilement, dont l'un est que sous mac, vous n'avez pas de barre de défilement visible, donc toutes les solutions ci-dessus ne vous donneront pas une réponse précise.

Donc, comme le rendu du navigateur n'est pas très fréquent, vous pouvez vérifier le défilement avec changement de défilement, puis le remettre en place:

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

Juste déconner ici car aucune des solutions ci-dessus n'a fonctionné pour moi (jusqu'à présent). J'ai trouvé un certain succès en comparant la hauteur de défilement d'une division à son décalage

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

Cela semble me donner une comparaison précise ... jusqu'à présent. Est-ce que quelqu'un sait si cela est légitime?

Pour IE11 (Internet Explorer 11), j'ai dû changer la logique pour:

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

C'est parce que IE signale scrollHeight comme 1 plus grand que clientHeight quand aucune barre de défilement n'est présente mais environ 9 plus grand quand une barre de défilement est présente

Si vous avez besoin de savoir s'il existe une barre de défilement pour toute la page Web et avec une prise en charge complète du navigateur, vous pouvez utiliser ceci:

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

Il est important d'utiliser window.innerHeightau lieu de document.body.clientHeightcar dans certains navigateurs mobiles, clientHeight n'obtiendra pas la taille de la barre d'adresse, mais scrollHeight le fera, vous obtenez donc de faux calculs.

aucune de ces réponses n'est correcte. vous devez utiliser ceci:

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

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

Ajoutez un élément 100% large à l'intérieur. Définissez ensuite le débordement sur masqué. Si le style calculé de l'élément (à partir de jQ) change, le parent avait une barre de défilement.

EDIT: Il semble que vous vouliez une méthode multi-navigateurs comme getComputedStyle . Essayer:

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