javascript - 如何通过滚动来缩放元素？

问题描述

我目前正在学习 javascript，遇到了一个让我陷入困境的问题：
我有一个divwith a90% height和 a 80% width。当滚动到全屏尺寸（需要占据整个显示器）（，，）时
，我试图让它增长。div100% width100% height

我已经尝试过 for 和 do-while 循环，但它似乎不起作用。
似乎heightand widthofdiv并没有改变元素的样式。

有谁知道如何解决这一问题？
我真的很期待您能给我的任何提示，以便完成我的项目并从我的错误中吸取教训。

以下是我当前的代码：

$(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;
}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Timo Roedler</title>
        <meta name="description" content="small test with Scrolling">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="headline">

            </div>
            <div class="main">
                <div class="home">
                    
                </div>
                <div class="supply">
                    <div class="supply1">
                        
                    </div>
                    <div class="supply2">

                    </div>
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="app.js"></script>

    </body>
</html>

标签： javascripthtmljquerycss

解决方案

很好的努力。你只是有一些不正确的事情。

定位元素

现在，您有以下代码。

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

在这种情况下，您试图定位您的“home”元素并且语法是正确的，但它不会返回节点。 .getElementsByClassName()返回一个类似数组的 object，这意味着您需要使用document.getElementsByClassName('home')[0]or来访问它div[0]。就个人而言，我更喜欢使用document.querySelector()，但您也可以使用 jQuery 来获取您想要的元素。

应用样式

这是你的代码：

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

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

首先，JavaScript 中字符串的性质允许您简单地使用h = h + '%'. 此外，如果您需要在字符串中包含引号（您不在这里，但知道它可能很有用），您可以将它们用单引号括起来：var message = 'the "name" field is required.' 一旦您有了一个字符串，您就不能再使用Math.round()它了. Math.round()只接受一个数字。但是，在这种情况下，不需要四舍五入。您可以使用未取整的值，但不应将其应用于.height. 该属性已过时，最好分配给 CSS 样式属性，即.style.height.

将元素居中

在您的代码中，您尝试分别使用 5% 和 10% 的顶部和左侧来偏移元素。当你改变高度时，你也必须改变它们，或者你可以使用变换来使你的元素居中，如下所示：

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

总的来说，祝你努力学习 JavaScript 并祝你好运。这是一门非常有趣的语言学习。下面我包含了一个包含这些更改的代码片段。希望它能帮助展示上述信息。

$(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;
}