11480 sujets

JavaScript, DOM et API Web HTML5

Pages :
(reprise du message précédent)

upload/1606816726-65675-participationcontribution3.png Voici une copie d'écran. Le bas de la page occupe un espace vide.
Modifié par denisduval75 (01 Dec 2020 - 10:58)
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.


<!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>
J'ai pu résoudre mon problème avec le scrollBar vertical affiché mais non reconnu (variable document.documentElement.clientWidth incorrect).
J'avais un élément non visible par un render que j'ai remplacé par un style visible en html.

Merci beaucoup Parsimonhi pour ton aide et ta patience Smiley biggrin
Pages :