HTML 页面中不需要的水平和垂直滚动空间

Question

I am working on CSS effects, In the code, I append divs for showing balls to document body with random size and color.我正在研究 CSS 效果，在代码中，我将用于显示球的 div 附加到具有随机大小和颜色的文档正文中。 But there is extra scroll space being generated with the code.但是代码会生成额外的滚动空间。 I am struck with the extra scroll that is being generated both horizontally and vertically with the balls.我对使用球在水平和垂直方向上生成的额外卷轴感到震惊。

The HTML page will not contain more than two lines. HTML 页面不会包含超过两行。

So far my code for the HTML page I created Code Pen到目前为止，我创建的 HTML 页面的代码是Code Pen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://kit.fontawesome.com/cae1531884.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Rubik&display=swap" rel="stylesheet">
   
    <style>
        body {

            margin: 0;
            padding: 0;
            font-family: 'Montserrat', sans-serif;
        }

        .ball {
            position: absolute;
            border-radius: 100%;
            opacity: 0.7;
        }

        .headings {
            font-family: 'Rubik', sans-serif;
        }

        .container {
            height: 100vh;
            padding-left: 2rem;
            position: relative;
        }

        .vertical-center {
            margin: 0;
            position: absolute;
            top: 50%;
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .social-links {
            padding: 5px;
            color: #121212;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="vertical-center">
            <div class="header headings">
                <h1>Hello World</h1>
            </div>
            <div class="content">
                <p>Lorem Ipsum</p>
            </div>
         
        </div>
    </div>


    <script>

        const colors = ["#3CC157", "#2AA7FF", "#d3d3d3", "#FCBC0F", "#F85F36"];

        const numBalls = 50;
        const balls = [];

        for (let i = 0; i < numBalls; i++) {
            let ball = document.createElement("div");
            ball.classList.add("ball");
            ball.style.background = colors[Math.floor(Math.random() * colors.length)];
            ball.style.left = `${Math.floor(Math.random() * 100)}vw`;
            ball.style.top = `${Math.floor(Math.random() * 100)}vh`;
            ball.style.transform = `scale(${Math.random()})`;
            ball.style.width = `${Math.random()}em`;
            ball.style.height = ball.style.width;

            balls.push(ball);
            document.body.append(ball);

        }

        // Keyframes
        balls.forEach((el, i, ra) => {
            let to = {
                x: Math.random() * (i % 2 === 0 ? -11 : 11),
                y: Math.random() * 12
            };

            let anim = el.animate(
                [
                    { transform: "translate(0, 0)" },
                    { transform: `translate(${to.x}rem, ${to.y}rem)` }
                ],
                {
                    duration: (Math.random() + 1) * 2000, // random duration
                    direction: "alternate",
                    fill: "both",
                    iterations: Infinity,
                    easing: "ease-in-out"
                }
            );
        });
    </script>

</body>

</html>

Answer 1

You can set the body width to 100vw ( viewport width ) and height to 100vh ( viewport height ), and also hide the scrollbar by setting body's overflow to hidden .您可以将主体width设置为100vw （视口宽度）和height为100vh （视口高度），还可以通过将主体的overflow设置为hidden来hidden滚动条。

body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    ...
}

HTML 页面中不需要的水平和垂直滚动空间

问题描述

1 个解决方案

解决方案1
0 2020-08-30 18:40:40

HTML 页面中不需要的水平和垂直滚动空间

问题描述

1 个解决方案

解决方案1 0 2020-08-30 18:40:40

解决方案1
0 2020-08-30 18:40:40