11521 sujets
JavaScript, DOM et API Web HTML5
Voici une copie d'écran. Le bas de la page occupe un espace vide. Bonjour,
Que c'est dommage que JS ne permette pas de controler la presence ou non de la barre de scroll.
Hier j etais parti sur une autre idée concernant la barre verticale. S il y a une barre de scroll verticale, la dimension en largeur devrait diminuer (de la largeur de la barre de scroll).
J ai essayé de detecter en ce sens. Mais c est exactement le meme raisonnement que pour la hauteur.
Pour info, je suis sur Windows 10.
On peut connaitre la largeur de window, que la barre soit present ou non, c est tjrs la meme largeur.
J ai fait un petit programme ci dessous, ca fonctionne sur mon PC mais comme l'a dit Parsimohi, cest tellement lié à la structure du HTML et du CSS (un margin de trop, et rien ne marche plus !).
Au debut, pour les tests, j avais mis en CSS : html, body{margin:0 ; padding:0}
Si ca peut aider un peu.
J'ai testé avec une fenetre de firefox à cote de la fenetre de VSCode , donc la largeur est petite (562 px).
Enfin, je n ai pas testé avec les padding et border... il faudrait en tenir compte.
Que c'est dommage que JS ne permette pas de controler la presence ou non de la barre de scroll.
Hier j etais parti sur une autre idée concernant la barre verticale. S il y a une barre de scroll verticale, la dimension en largeur devrait diminuer (de la largeur de la barre de scroll).
J ai essayé de detecter en ce sens. Mais c est exactement le meme raisonnement que pour la hauteur.
Pour info, je suis sur Windows 10.
On peut connaitre la largeur de window, que la barre soit present ou non, c est tjrs la meme largeur.
J ai fait un petit programme ci dessous, ca fonctionne sur mon PC mais comme l'a dit Parsimohi, cest tellement lié à la structure du HTML et du CSS (un margin de trop, et rien ne marche plus !).
Au debut, pour les tests, j avais mis en CSS : html, body{margin:0 ; padding:0}
Si ca peut aider un peu.
J'ai testé avec une fenetre de firefox à cote de la fenetre de VSCode , donc la largeur est petite (562 px).
Enfin, je n ai pas testé avec les padding et border... il faudrait en tenir compte.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test barre de Scroll</title>
<style>
body{margin-right: 10px;}
div{margin-top: 200px;}
</style>
</head>
<body id="body">
<p>Divers Tests DOM</p>
<div>margin top</div>
<script>
// modifier dans <style> margin-top de 100px
// à 600px pour faire apparaitre l'ascenseur
window.onload = function ()
{
// ici on a margin 18.
// 8 left mis par le navigateur
// et 10 right de la balise <style>
let largeurWindow = window.innerWidth;
// 562 . identique, ascenseur ou pas
// 8 + 544 + 10 = 562
let largeurBody = document.body.offsetWidth;
// document.body.offsetWidth
// document.body.scrollWidth
// document.body.clientWidth
// 3 expressions identiques : meme resultat
// 544 ... ou 527 si ascenseur
let largeurBodyMargin = largeurBody + 18;
// 544+18= 562 ... 527+18= 545 si asc.
let r = largeurWindow - largeurBodyMargin;
// 562-562= 0 ... ou 562-545 != 0 si asc.
let asc = (r==0) ? "PAS d'ascenseur" : "ascenseur";
alert(
'- largeur window = ' + largeurWindow
+ ' largeur Body+margin = '+largeurBodyMargin
+ ' .... ' + asc
);
}
</script>
</body>
</html>
