Détecter si une page a une barre de défilement verticale?
Je veux juste une simple JQ/JS pour vérifier si la page en cours/fenêtre (pas un élément particulier) a une barre de défilement verticale.
Recherche sur google me donne des trucs qui me semble trop complexe pour seulement cette fonctionnalité de base.
Comment cela peut-il être fait?
Vous devez vous connecter pour publier un commentaire.
overflow
propriété de labody
est fixé àhidden
quelque part le long de la ligne, cela ne marchera pas. Paramètre caché sur un corps est extrêmement rare, bien.$(document)
au lieu de$("body")
, cela a fonctionné pour moi quand le corps n'a pas (j'ai une absolue positionne favorablement récipient avec un aspect ratio largeur/hauteur)essayez ceci:
Cela va seulement vous dire si la verticale scrollHeight est plus grande que la hauteur de la partie visible du contenu, cependant. Le
hasVScroll
variable contiendra vrai ou faux.Si vous avez besoin de faire une vérification plus complète, ajoutez le code suivant au code ci-dessus:
cStyle.overflow === 'scroll'
?document.body
. Mais il devrait être (hasVScroll && cStyle.débordement == "visible" && élément.nodeName == "CORPS") . De Plus il est nécessaire de vérifier pourcStyle.overflow === 'scroll'
comme vous le soulignez.J'ai essayé la réponse précédente et ne semble pas être le travail le $("body").hauteur() ne représentent pas nécessairement l'ensemble du code html de hauteur.
J'ai corrigé la solution comme suit:
Laisser cette question de la mort 😉 Il y a une raison pour laquelle Google ne vous donne pas la solution la plus simple. Les cas spéciaux et les navigateur bizarreries une incidence sur le calcul, et il n'est pas aussi trivial qu'il semble être.
Malheureusement, il y a des problèmes avec les solutions proposées jusqu'ici. Je ne veux pas dénigrer eux - ils sont de grands points de départ et de toucher sur toutes les propriétés requises pour une approche plus rigoureuse. Mais je ne recommanderais pas de copier et de coller le code de toutes les autres réponses, car
$( document ).width()
et.height()
tomber en proie à jQuery le buggy de détection de la taille du document.window.innerWidth
, si le navigateur prend en charge, votre code ne parviennent pas à détecter les barres de défilement dans les navigateurs mobiles, où la largeur de la barre de défilement est généralement de 0. Ils sont simplement montré temporairement comme une superposition et de ne pas prendre de la place dans le document. Zoom sur mobile devient aussi un problème de cette façon (une longue histoire).html
etbody
élément de non-valeurs par défaut (ce qui arrive ensuite est un peu impliqué - voir cette description).J'ai passé plus de temps que je l'aurais imaginé, sur la recherche d'une solution qui "fonctionne" (contre la toux). L'algorithme que je viens avec le fait maintenant partie d'un plugin, jQuery.isInView, qui expose un
.hasScrollbar
méthode. Jetez un oeil à la source si vous le souhaitez.Dans un scénario où vous êtes en plein contrôle de la page et ne pas avoir à traiter avec des inconnus CSS, à l'aide d'un plugin peut-être exagéré - après tout, vous connaissez le bord de cas s'appliquent, et qui ne le sont pas. Toutefois, si vous avez besoin des résultats fiables dans un environnement inconnu, alors je ne pense pas que les solutions proposées ici seront assez. Vous êtes mieux d'utiliser un bien testé le plugin - mine ou de quelqu'un elses.
window.scrollbars
objet qui a une propriété unique,visible
. Prometteur, mais n'est-ce pas. Il n'est pas pris en charge dans IE, y compris IE11. Et il vous dit qu'il est un barre de défilement - mais pas laquelle. Voir le page de test ici.Celui-ci ne fonctionne pour moi:
Pour le corps, il suffit d'utiliser
hasVerticalScroll()
.Curieusement, aucune de ces solutions vous dire si une page a 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+ (pas testé dans le moindre des navigateurs). (Ou à strictement répondre à la question,!!(window.innerWidth - document.body.clientWidth)
Pourquoi? Disons que vous avez une page où le contenu est plus grand que la hauteur de la fenêtre et l'utilisateur peut faire défiler vers le haut/vers le bas. Si vous utilisez Chrome sur un Mac avec la souris non branché, l'utilisateur ne verra pas de barre de défilement. Brancher une souris et une barre de défilement apparaît. (Notez que ce comportement peut être remplacé, mais c'est le défaut autant que je sache).
J'ai trouvé vanila solution
JS:
window.innerWidth > document.documentElement.clientWidth
est vrai, maiswindow.innerHeight > document.documentElement.clientHeight
ne l'est pas. Il regarde comme si elle était dans l'autre sens dans ce cas. Je ne suis pas un développeur JS, j'ai juste besoin pour le Sélénium tests. Je suis reconnaissant pour les conseils.Cela vous dira si vous avez une barre de défilement ou pas. J'ai inclus quelques informations qui peuvent vous aider à déboguer, qui s'affiche comme une alerte JavaScript.
Mettre cela dans une balise script, après la balise body de clôture.
J'ai écrit une version mise à jour de Kees C. Bakker réponse:
La fonction retourne true ou false selon que la page a une barre de défilement verticale ou pas.
Par exemple:
Il suffit de comparer la largeur des documents à l'élément racine (c'est à dire de l'élément html) contre la partie intérieure de la fenêtre:
Si vous avez également besoin de connaître la barre de défilement largeur:
Les autres solutions ne fonctionnent pas dans un de mes projets et j'ai terminer la vérification de débordement de la propriété css
mais il ne fonctionnera que si la barre de défilement apparaissent disparaissent en changeant la prop il ne fonctionnera pas si le contenu est égale ou plus petite que la fenêtre.
- Je utiliser