Unwanted space horizontal and vertical scroll space in HTML Page

Question

I am working on CSS effects, In the code, I append divs for showing balls to document body with random size and color. 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.

So far my code for the HTML page I created 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 .

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

Unwanted space horizontal and vertical scroll space in HTML Page

Question

1 answers

solution1
0 2020-08-30 18:40:40

Unwanted space horizontal and vertical scroll space in HTML Page

Question

1 answers

solution1 0 2020-08-30 18:40:40

solution1
0 2020-08-30 18:40:40