如何阻止滚动条移动？ html/css答案

【问题标题】：How can I stop the Scroll bar from moving? html/css如何阻止滚动条移动？ html/css
【发布时间】：2025-11-28 12:00:01
【问题描述】：

如何让滚动条停止？您可以看到左侧的滚动条。我认为 HTML 代码没有任何问题，但我确信 CSS 代码有问题。

我一开始以为是边距或长度有问题，但不是。

这是我的 CSS 和 HTML 代码，我该如何解决？或者问题出在哪里？ -

html {
  height: 100%;
}
body {
    background-color:  black;
}
.trans_box {
    width: 180px;
    height: 180px;
    background-color: green;
    
    vertical-align: middle;
    display: inline-block;

    position: relative;
    top: 200px;
    animation: block-rotate 6s linear infinite;
}

@keyframes block-rotate {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}
.part {
    position: absolute;
    width:180px;
    height:180px;

    -webkit-border-radius:200px 0 0 0; 
    -moz-border-radius:200px 0 0 0;
}

#one {
    background-color:blue; 
    top: -70%;
    transform: rotate(45deg);
    
}
#two {
    background-color: pink; 
    transform: rotate(135deg);
    left: 70%;
}
#three {
    background-color: red;
    transform: rotate(-45deg);
    left: -70%;
}
#four {
    background-color: antiquewhite;
    transform: rotate(-135deg);
    top: 70%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="mainpage.css">
</head>
<body>
    <div style="text-align: center;">
        <div class="trans_box">
            <div class="part" id="one"></div>
            <div class="part" id="two"></div>
            <div class="part" id="three"></div>
            <div class="part" id="four"></div>
        </div>
    </div>

</body>
</html>

【问题讨论】：

标签： html css animation rotation transform

【解决方案1】：

在你的 CSS 中添加 body {overflow: hidden;}，固定代码在这里：

html {
  height: 100%;
}
body {
    background-color:  black;
    overflow: hidden;
}
.trans_box {
    width: 180px;
    height: 180px;
    background-color: green;
    
    vertical-align: middle;
    display: inline-block;

    position: relative;
    top: 200px;
    animation: block-rotate 6s linear infinite;
}

@keyframes block-rotate {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}
.part {
    position: absolute;
    width:180px;
    height:180px;

    -webkit-border-radius:200px 0 0 0; 
    -moz-border-radius:200px 0 0 0;
}

#one {
    background-color:blue; 
    top: -70%;
    transform: rotate(45deg);
    
}
#two {
    background-color: pink; 
    transform: rotate(135deg);
    left: 70%;
}
#three {
    background-color: red;
    transform: rotate(-45deg);
    left: -70%;
}
#four {
    background-color: antiquewhite;
    transform: rotate(-135deg);
    top: 70%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="mainpage.css">
</head>
<body>
    <div style="text-align: center;">
        <div class="trans_box">
            <div class="part" id="one"></div>
            <div class="part" id="two"></div>
            <div class="part" id="three"></div>
            <div class="part" id="four"></div>
        </div>
    </div>

</body>
</html>

【讨论】：

感谢您的评论。多亏了你，我终于解决了这个问题。
@kimking 也谢谢你。 :) 欢迎您接受答案，以便未来遇到相同问题的人可以更快地解决他们的问题。