Нежелательное пространство горизонтальное и вертикальное пространство прокрутки на странице HTML

#javascript #html #css #layout #responsive-design

#javascript #HTML #css #макет #адаптивный дизайн

Вопрос:

Я работаю над эффектами CSS, в коде я добавляю divs для отображения шариков в теле документа со случайным размером и цветом. Но с помощью кода генерируется дополнительное пространство для прокрутки. Я поражен дополнительной прокруткой, которая генерируется как по горизонтали, так и по вертикали с помощью шариков.

HTML-страница не будет содержать более двух строк.

Пока что мой код для страницы 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=Montserratamp;family=Rubikamp;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>

1. But there is extra scroll space being generated with the code. … Контейнер управляет движением прокрутки. Попробуйте overflow-x: auto

2. Это работало для полноэкранного режима, но не работает в режиме мобильного просмотра

3. В мобильном режиме пользователь сможет перетаскивать скрытое содержимое вправо

4. Нет необходимости в этом сенсорном перетаскивании, страница содержит не более 2 строк содержимого html

5. Поскольку контейнер не является проблемой, некоторые другие аспекты вашего кода приводят к нежелательным результатам. Возможно, у вас есть дополнительный закрывающий тег или не закрытый открывающий тег.

Ответ №1:

Вы можете установить для тела width значение 100vw (ширина области просмотра) и height на 100vh (высота области просмотра), а также скрыть полосу прокрутки, установив для тела overflow значение hidden .

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

1. Это сделает недоступным горизонтальное содержимое.

2. Это работало для полноэкранного режима, но не работает в режиме мобильного просмотра. Я все еще получаю прокрутку для мобильного просмотра

3. Для меня это работает как на мобильном, так и на полноэкранном режиме. Вы удалили какую-либо высоту или ширину? Если это так, я могу попробовать что-то еще. Если нет, я действительно понятия не имею