Détecter l'existence d'une scrollbar horizontale ?

Bonjour,

Comment détecter l'existence de la scrollbar horizontale que fait apparaître le navigateur quand la fenêtre devient trop petite ?

Si possible en simple javascript (sans JSQuery).

Merci d'avance.

Bonjour,

Une scrollbar horizontale apparait lorsqu'un élément html d'une page web dépasse la largeur de l'écran. Il suffit donc de détecter ce dépassement via js, ou plutôt - si je comprends bien le sens final de votre question - de corriger cet élément afin qu'il ne dépasse plus de la page quelque soit la taille de l'écran (genre : max-width:100%, etc...).

boteha_2 a écrit :
Bonjour,

Comment détecter l'existence de la scrollbar horizontale que fait apparaître le navigateur quand la fenêtre devient trop petite ?

Salut,

Alors petite rectification. Aujourd'hui, quand la fenêtre et plus petite on utilise la responsivité (je franglise le mot), cela évite ce genre de chose, via les media queries.

Yo,

Si on se base sur ce qu'a dit Olivier au début

Olivier C a écrit :
Une scrollbar horizontale apparait lorsqu'un élément html d'une page web dépasse la largeur de l'écran. Il suffit donc de détecter ce dépassement via js

ça donne un truc du genre : https://jsfiddle.net/0dzgx8rg/ Ou on va regarder la largeur du HTML puis la largeur du bloc et comparer.

let test = document.getElementById('js-test');
test.innerHTML = test.clientWidth + ' - ' + document.documentElement.clientWidth;

Olivier C a écrit :
si je comprends bien le sens final de votre question - de corriger cet élément afin qu'il ne dépasse plus de la page quelque soit la taille de l'écran (genre : max-width:100%, etc...).

JENCAL a écrit :
Alors petite rectification. Aujourd'hui, quand la fenêtre et plus petite on utilise la responsivité (je franglise le mot), cela évite ce genre de chose, via les media queries.

Je ne sais pas trop ce qui vous laisse penser qu'il veut l'éviter, sa question était sur comment le détecter... je suis d'accord qu'il faut toujours remonter à la source du problème et que s'il fait ça pour l'éviter ce n'est pas la bonne façon de faire mais là vous extrapolez peut être un peu trop vite non ?!

Bisous

_laurent a écrit :

Je ne sais pas trop ce qui vous laisse penser qu'il veut l'éviter, sa question était sur comment le détecter... je suis d'accord qu'il faut toujours remonter à la source du problème et que s'il fait ça pour l'éviter ce n'est pas la bonne façon de faire mais là vous extrapolez peut être un peu trop vite non ?!

Bisous

Hmmm... peut être un peu ^^.

Bonjour,

Merci de vos réponses.

Je n'ai pas trop le temps de suivre dans la journée mais j'y reviens à partir de 18h.

Quelques précisions.

Le site est responsive mais un problème doit être résolu avec certains breaking points.

En gros il y a effet sticky qui rend la colonne de gauche fixe.
Mais il peut arriver qu'un tableau dans le bloc de droite devienne trop large.
Il apparaît alors une scrollbar horizontale.
Et si l'utilisateur scrolle vers la gauche le bloc de droite se superpose au bloc de gauche, les deux étant transparents.

Il y aurait plusieurs solutions possibles mais mon idée est simplement d'arrêter l'effet sticky à l'apparition de la scrollbar.

Je suis nul en javascript.
Je sais mesurer la taille de la fenêtre du client :

var a = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

Je ne pas mesurer la taille du body...

A ma connaissance il n'existe pas de fonction genre ScrollBarExist ().

Merci d'avance.

JENCAL a écrit :
Hmmm... peut être un peu ^^.

@JENCAL @Olivier
Bon bah toutes mes excuses hahaha

Tu peux comparer la valeur de scrollWidth avec celle de clientWidth.

Bonjour,

Merci de ta réponse.

J'ai fait l'essai suivant :

var a = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var w = document.body.scrollWidth || document.documentElement.scrollWidth;

if (w < a) Sticky
else Pas sticky

Cela marche avec Firefox, pas essayé sur autres browsers.

Sachant que je suis nul en javascript, deux questions subsidiaires :

1)
document.body.scrollWidth || document.documentElement.scrollWidth est-il compris par tous les navigateurs ?

Faut-il proposer des alternatives comme on le fait avec clientWidth ?

Je peux bien sûr donner un id au body et utiliser document.getElementById qui est compris par tout le monde mais j'aime faire au plus simple et alléger au maximum.

2)
J'ai trouvé .scrollLeft

Il me semble que c'est encore plus simple car je n'ai pas à vérifier la largeur de la fenêtre.

var w = document.body.scrollLeft;

if (w == 0) Sticky
else Pas sticky

J'ai essayé et cela ne marche pas.
Modifié par boteha_2 (14 Nov 2017 - 19:53)

1) document.body.scrollWidth || document.documentElement.scrollWidth est-il compris par tous les navigateurs ?

Oui, mais tu peux te simplifier la vie:

var a = document.body.clientWidth;
var w = document.body.scrollWidth;

à moins de vouloir absolument supporter IE5.

2) scrollLeft ne renseigne pas s'il y a un scroll, mais si l'élément est scrollé. C'est plus, ou moins pratique que l'autre solution mais surtout ça ne vérifie pas la même chose. À toi de voir si cela convient mieux à ton cas. Par contre il faut le vérifier sur un évènement onScroll…
Modifié par kustolovic (15 Nov 2017 - 09:02)

Bonjour,

Merci de tes réponses.

Mon script est appelé par onScroll.

Je vais essayer scrollLeft pour bien comprendre la différence.

Bonjour,

Voilà le script actuel :

window.onscroll = function() {myFunction()};

function myFunction()
{
var x = document.body.scrollTop || document.documentElement.scrollTop;
var h = document.getElementById("panier").offsetHeight;
var b = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var a = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var w = document.body.scrollWidth || document.documentElement.scrollWidth;

if (x > 100 && h < b && w < a)
{
document.getElementById("panier").className = "fixed";
}
else
{
document.getElementById("panier").className = "";
}     
}

L'effet sticky (bloc de gauche en position fised) si :
Scroll vettical de 100 ou plus vers le bas
le bloc de gauche n'est pas plus haut que la fenêtre
Le body n'est pas plus large que la fenêtre.