Comment puis-je zoomer un élément en faisant défiler?

Question

Je suis actuellement en train d'apprendre le javascript et j'ai rencontré un problème qui m'a bloqué :
J'ai un div avec une hauteur de 90% et une largeur de 80%.
Je tente de faire en sorte que ce div grandisse lorsque je fais défiler pour atteindre la taille plein écran (doit occuper tout l'écran) (largeur de 100%, hauteur de 100%).

J'ai essayé avec des boucles for et do-while, mais cela ne semble pas fonctionner.
Il semble que la hauteur et la largeur du div ne changent pas le style de l'élément.

Quelqu'un sait comment résoudre ce problème ?
Je suis vraiment impatient de recevoir vos conseils pour réaliser mon projet et apprendre de mes erreurs.

Voici mon code actuel :

$(document).ready(function(){

   $(window).scroll(function(e){

      var pos = $(window).scrollTop();

      console.log("Scroll:" +pos);

      var div = document.getElementsByClassName('home');

      if(pos>300){
         let h = 90 + (pos/150);
         let w = 80 + 1 +(pos/50);

         if(h>100){
            h = 100;
         }

         if(w>100){
            w = 100;
         }

         h = " \" " + h + " %\"";
         w = " \" " + w + " %\"";

         console.log(h);

         document.getElementsByClassName('home').height = Math.round(h);
         document.getElementsByClassName('home').width = Math.round(w);
      }
   });
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #CBCACA;
}

.wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

.home{
    height: 90%;
    width: 80%;
    position: fixed;
    top: 5%;
    left: 10%;
    border-radius: 50px;
    background-color: #302D2D;
}

.supply{
    height: 100vh;
    width: 70%;
    position: relative;
    left: 15%;
    margin-top: 100%;
    background-color: crimson;
}

        Timo Roedler

Answer 1

Très bon effort. Vous avez juste quelques petites choses incorrectes.

Ciblage de l'élément

Actuellement, vous avez le code suivant.

var div = document.getElementsByClassName('home');

Dans cette ligne, vous essayez de cibler votre élément "home" et la syntaxe est correcte, mais cela ne renverra pas le nœud. .getElementsByClassName() renvoie un objet semblable à un tableau, ce qui signifie que vous devez y accéder en utilisant document.getElementsByClassName('home')[0] ou div[0]. Personnellement, je préfère utiliser document.querySelector(), mais vous pourriez aussi utiliser jQuery pour obtenir l'élément souhaité.

Application du style

Voici votre code :

h = " \" " + h + " %\"";

document.getElementsByClassName('home').height = Math.round(h)

Tout d'abord, la nature des chaînes de caractères en JavaScript vous permet de simplement utiliser h = h + '%'. De plus, si vous avez besoin d'inclure des guillemets dans une chaîne de caractères (ce n'est pas le cas ici, mais cela peut être utile de le savoir), vous pouvez les envelopper dans des guillemets simples à la place : var message = 'le champ "nom" est requis.'. Une fois que vous avez une chaîne, vous ne pouvez plus utiliser Math.round() dessus. Math.round() ne prend qu'un nombre en argument. Dans ce cas, cependant, il n'est pas nécessaire d'arrondir. Vous pouvez utiliser la valeur non arrondie, mais vous ne devriez pas l'appliquer à .height. Cette propriété est obsolète et il est préférable de l'assigner à la propriété de style CSS, qui est .style.height.

Centrer votre élément

Dans votre code, vous tentez de décaler l'élément de 5% et 10% vers le haut et vers la gauche respectivement. Vous devrez également changer cela lorsque vous modifierez la hauteur, ou vous pouvez utiliser des transformations pour centrer votre élément comme ceci :

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

Dans l'ensemble, bon effort et bonne chance dans vos efforts pour apprendre JavaScript. C'est un langage très amusant à apprendre. Ci-dessous, j'ai inclus un extrait de code avec ces changements. Espérons que cela aidera à démontrer les informations ci-dessus.

$(document).ready(function(){

   $(window).scroll(function(e){

      var pos = $(window).scrollTop();

      //console.log("Scroll:" +pos);

      var div = document.querySelector('.home');

      if(pos>300){
         let h = 90 + (pos/150);
         let w = 80 + 1 +(pos/50);

         if(h>100){
            h = 100;
         }

         if(w>100){
            w = 100;
         }

         h = h + "%";
         w = w + "%";

         //console.log(h);

         document.querySelector('.home').style.height = h;
         document.querySelector('.home').style.width = w;
      }
   });
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #CBCACA;
}

.wrapper{
    height: 100%;
    width: 100%;
    position: relative;
}

.home{
    height: 90%;
    width: 80%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50px;
    background-color: #302D2D;
}

.supply{
    height: 100vh;
    width: 70%;
    position: relative;
    left: 15%;
    margin-top: 100%;
    background-color: crimson;
}

        Timo Roedler

Answer 2

À première vue, cela pourrait avoir quelque chose à voir avec ces lignes

     // Vous avez essayé d'utiliser Math.round sur une chaîne de caractères.
     h = Math.round(h) + "%";
     w = Math.round(w) + "%";
     console.log(h);
     // assigner le pourcentage directement au style
     document.getElementsByClassName('home').style.height = h;
     document.getElementsByClassName('home').style.width = w;