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

Question

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

Une chose de sûr est de vérifier si l'élément est plus grande que la fenêtre d'affichage, 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 de barres de défilement (de sorte qu'il peut réellement faire défiler par les humains).

Question

Comment puis-je vérifier pour les barres de défilement dans une 1 la croix-navigateur et 2 javascript seulement (comme dans pas de jQuery)?

Javascript seulement, parce que j'ai besoin aussi léger que possible, parce que j'avais envie d'écrire un très rapide sélecteur jQuery filtre

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

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

Je suppose que je devrais vérifier pour overflow paramètres de style, mais comment dois-je faire dans un navigateur croix de chemin?

Édition supplémentaire

Non seulement overflow paramètres de style. Pour vérifier si un élément a une barre de défilement n'est pas aussi anodin qu'il y paraît. La première formule que j'ai écrit ci-dessus fonctionne très bien lorsque l'élément n'est pas une frontière, mais quand il le fait (surtout quand la frontière est de grande largeur), offset dimension peut être plus grand que scroll dimension, mais l'élément peut toujours être déplacé. Nous avons à soustraire des frontières de l' offset dimension d'obtenir le véritable fenêtre d'affichage avec défilement de l'élément et de les comparer à scroll dimension.

Pour référence future

:scrollable jQuery sélecteur de filtre est inclus dans mon .scrollintoview() plugin jQuery. Code complet peut être trouvé dans mon blog , si quelqu'un en a besoin. Même si elle n'était pas fournir la solution réelle Soumya du code considérablement m'a aidé à résoudre le problème. Il m'a orienté dans la bonne direction.

Answer 1

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

 div = document.getElementById('container_div_id');
var hasHorizontalScrollbar= div.scrollWidth>div.clientWidth;
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;

/* you get true/false */
 

Answer 2

Essayer:

Pour barre de défilement verticale

el.scrollHeight> el.clientHeight

Pour barre de défilement horizontale

el.scrollWidth> el.clientWidth

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

Answer 3

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

Si ils sont plus grand que 0, vous savez il y a des barres de défilement. Si elles sont à 0, puis les mettre à 1, et de tester de nouveau pour voir si vous obtenez un résultat de 1. Alors, retour à 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 y a une autre propriété de l'IE, donc je vais le mettre à jour en une minute.

EDIT: Semble que IE peut prendre en charge cette propriété. (Je ne peux pas tester IE droit maintenant.)

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

Answer 4

Je déconne juste ici car aucune des solutions ci-dessus n’a fonctionné pour moi (jusqu’à présent). J'ai réussi à comparer le scrollheight d'une div à son offsetHeight.

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

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