web-dev-qa-db-fra.com

Détecter si une page a une barre de défilement verticale?

Je veux juste que quelques simples JQ/JS vérifient si la page/fenêtre actuelle (et non un élément particulier) a une barre de défilement verticale.

Googling me donne des choses qui semblent trop complexes pour cette fonctionnalité de base.

Comment cela peut-il être fait?

javascriptjqueryscroll
115
Woody
$(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:<");
    }
});
91
Thiago Belem

essaye ça:

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

Cela ne vous indiquera cependant que si scrollHigh vertical est plus grand que la hauteur du contenu visualisable. La variable hasVScroll contiendra true ou false.

Si vous devez effectuer une vérification plus approfondie, ajoutez ce qui suit au code ci-dessus:

// 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");
71
Andy E

J'ai essayé la réponse précédente et ne semble pas travailler avec le $ ("body"). Height () ne représente pas nécessairement la hauteur totale en html.

J'ai corrigé la solution comme suit:

// 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:<"); 
}
41
Bharat

Ramenons cette question d'entre les morts;) Il y a une raison pour laquelle Google ne vous donne pas une solution simple. Les cas spéciaux et les bizarreries du navigateur affectent le calcul, et ce n’est pas aussi anodin qu’il semble être.

Malheureusement, les solutions décrites jusqu'ici posent problème. Je ne veux pas les dénigrer du tout - ils sont un excellent point de départ et abordent toutes les propriétés essentielles nécessaires à une approche plus robuste. Mais je ne recommanderais pas de copier-coller le code d’une des autres réponses car

  • ils ne capturent pas l'effet du contenu positionné de manière fiable sur plusieurs navigateurs. Les réponses qui sont basées sur la taille du corps le manquent complètement (le corps n'est pas le parent offset de ce contenu, à moins qu'il ne soit positionné lui-même). Et ces réponses vérifiant $( document ).width() et .height() deviennent la proie de détection boguée de la taille du document par jQuery .
  • Reposant sur window.innerWidth, si le navigateur le prend en charge, empêche votre code de détecter les barres de défilement dans les navigateurs mobiles, où la largeur de la barre de défilement est généralement égale à 0. Elles ne sont affichées que temporairement en tant que superposition et ne prennent pas d'espace dans le document. . Le zoom sur mobile devient également un problème (longue histoire).
  • La détection peut être désactivée lorsque des personnes affectent explicitement le dépassement de capacité des éléments html et body à des valeurs autres que les valeurs par défaut (ce qui se produit ensuite est un peu impliqué - voir cette description ).
  • Dans la plupart des réponses, le remplissage du corps, les bordures et les marges ne sont pas détectés et faussent les résultats.

J'ai passé plus de temps que je n'aurais pu l'imaginer pour trouver une solution qui "fonctionne" (toux). L'algorithme que je viens de créer fait maintenant partie d'un plugin, jQuery.isInView , qui expose n .hasScrollbar méthode . Regardez à la source si vous le souhaitez.

Dans un scénario où vous maîtrisez parfaitement la page et n'avez pas à traiter avec des CSS inconnus, l'utilisation d'un plug-in peut être une tâche excessive. Après tout, vous savez quels cas Edge s'appliquent et ceux qui ne le sont pas. Cependant, si vous avez besoin de résultats fiables dans un environnement inconnu, alors je ne pense pas que les solutions présentées ici seront suffisantes. Vous feriez mieux d'utiliser un plugin bien testé - le mien ou n'importe qui d'autre.

17
hashchange

Celui-ci a fonctionné pour moi:

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

Pour le corps, utilisez simplement hasVerticalScroll().

14
Kees C. Bakker
var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;
11
Roman Zaykovsky

Curieusement, aucune de ces solutions ne vous indique si une page comporte une barre de défilement verticale.

window.innerWidth - document.body.clientWidth Vous donnera la largeur de la barre de défilement. Cela devrait fonctionner dans n'importe quoi IE9 + (non testé dans les navigateurs mineurs). (Ou pour répondre strictement à la question, !!(window.innerWidth - document.body.clientWidth)

Pourquoi? Supposons que vous avez une page dont le contenu est supérieur à la hauteur de la fenêtre et que l'utilisateur peut faire défiler vers le haut ou le bas. Si vous utilisez Chrome sur un Mac sans souris, l'utilisateur ne verra pas de barre de défilement. Branchez une souris et une barre de défilement apparaîtra. (Notez que ce problème peut être remplacé, mais c'est la réponse par défaut).

3
David Gilbertson
    <script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

Celui-ci vous dira si vous avez une barre de défilement ou non. J'ai inclus des informations pouvant aider au débogage, qui s'affichent sous la forme d'une alerte JavaScript.

Mettez ceci dans une balise de script, après la balise de corps de fermeture.

2
Don D.

J'ai trouvé la solution de vanille

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}
2
Sergey Shvager

J'utilise

public windowHasScroll()
{
    return document.body.clientHeight > document.documentElement.clientHeight;
}
1
amoss

Il suffit de comparer la largeur de l’élément racine du document (c’est-à-dire l’élément html) par rapport à la partie interne de la fenêtre:

if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')

Si vous devez également connaître la largeur de la barre de défilement:

vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
1
Babak

J'ai écrit une version mise à jour de la réponse de Kees C. Bakker:

const hasVerticalScroll = (node) => {
  if (!node) {
    if (window.innerHeight) {
      return document.body.offsetHeight > window.innerHeight
    }
    return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
      || (document.body.scrollHeight > document.body.offsetHeight)
  }
  return node.scrollHeight > node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
  this.props.handleDisableDownScrollerButton()
}

La fonction renvoie true ou false selon que la page comporte une barre de défilement verticale ou non.

Par exemple:

const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
  console.log('HAS SCROLL', hasVScroll)
}
1
agm1984

D'autres solutions ne fonctionnaient pas dans l'un de mes projets et j'ai fini par vérifier la propriété de débordement css

function haveScrollbar() {
    var style = window.getComputedStyle(document.body);
    return style["overflow-y"] != "hidden";
}

mais cela ne fonctionnera que si la barre de défilement apparaît disparaît en changeant l'accessoire mais ne fonctionnera pas si le contenu est égal ou inférieur à la fenêtre.

0
jcubic