在 CSS 中禁用滚动条
本教程将介绍一些禁用网页滚动条功能的方法。
将 html 和 body 标签的 overflow 设置为 hidden 以禁用 CSS 中的滚动条
我们可以使用 CSS overflow 属性来禁用 CSS 中的滚动条。overflow 属性定义了网页中滚动条的行为。当元素的内容大于指定区域时，可以隐藏或显示滚动条。当我们为 overflow 属性使用 hidden 值时，内容被裁剪到元素的区域，元素的其余部分将变得不可见。我们可以将其设置为 scroll 以添加滚动条以查看其余未剪辑的内容。我们将使用 PHP 在我们的网页上生成一个长文本。然后我们将禁用滚动条。
例如，在 PHP 中创建一个变量 $text 并为其赋予值 Hello World。使用 for 循环迭代 100 次。在显示变量时不要忘记添加 br 标签。这将创建 100 行文本 Hello World。将 PHP 包含在 HTML 的正文中。在 CSS 中，选择 html 和 body 标签。将边距设置为 0，并将高度设置为 100%。然后，将 overflow 属性设置为隐藏。
在下面的示例中，我们将 html 和 body 的 height 设置为 100%。这意味着 body 和 height 将具有其父容器的 100% 高度。这些容器的高度将等于浏览器的高度。文本将被裁剪到浏览器的高度，其余部分将不可见。如果边距已被其他值覆盖以禁用滚动条，我们甚至可以将 margin 属性设置为 0。我们甚至可以使用 overflow-y 代替 overflow 并将其设置为 hidden。它将垂直禁用滚动条。
示例代码：
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
html, body
{
height: 100%;
overflow: hidden
}
将 overflow-x 设置为 hidden 以禁用 CSS 中的水平滚动条
我们可以使用 overflow-x 属性并将其设置为 hidden 以禁用 CSS 中的水平滚动条。我们可以通过将文本限制为一行来测试水平滚动条的禁用。我们可以在 PHP 中多次循环文本并使用 CSS 强制它出现在一行中。
例如，按照上述方法使用 PHP 循环文本 Helloo World。不要使用 br 标签，以免文本出现在下一行。在 CSS 中，将 body 标签的 display 属性设置为 inline-block。在 html 标签中将 white-space 属性设置为 nowrap。然后，将 overflow-x 设置为 hidden，选择 body 标签。
当我们将 display 设置为 inline-block 时，它会强制将文本显示在一行中。为了在一行中实现文本，我们需要将父容器的 white-space 属性设置为 nowrap。到目前为止，水平滚动条运行良好。将 overflow-x 设置为 hidden 将根据视口裁剪文本，并且水平滚动条将被禁用。
示例代码：
<body>
<?php
$text = "Helloo World";
for($i=0; $i<100; $i++){
echo $text;
}
?>
</body>
html{
white-space:nowrap;
}
body {
display:inline-block;
overflow-x: hidden
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn