在 CSS 中禁用滚动条

Subodh Poudel 2023年1月30日 2021年10月30日
  1. htmlbody 标签的 overflow 设置为 hidden 以禁用 CSS 中的滚动条
  2. overflow-x 设置为 hidden 以禁用 CSS 中的水平滚动条
在 CSS 中禁用滚动条

本教程将介绍一些禁用网页滚动条功能的方法。

htmlbody 标签的 overflow 设置为 hidden 以禁用 CSS 中的滚动条

我们可以使用 CSS overflow 属性来禁用 CSS 中的滚动条。overflow 属性定义了网页中滚动条的行为。当元素的内容大于指定区域时,可以隐藏或显示滚动条。当我们为 overflow 属性使用 hidden 值时,内容被裁剪到元素的区域,元素的其余部分将变得不可见。我们可以将其设置为 scroll 以添加滚动条以查看其余未剪辑的内容。我们将使用 PHP 在我们的网页上生成一个长文本。然后我们将禁用滚动条。

例如,在 PHP 中创建一个变量 $text 并为其赋予值 Hello World。使用 for 循环迭代 100 次。在显示变量时不要忘记添加 br 标签。这将创建 100 行文本 Hello World。将 PHP 包含在 HTML 的正文中。在 CSS 中,选择 htmlbody 标签。将边距设置为 0,并将高度设置为 100%。然后,将 overflow 属性设置为隐藏。

在下面的示例中,我们将 htmlbodyheight 设置为 100%。这意味着 bodyheight 将具有其父容器的 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 Poudel avatar Subodh Poudel avatar

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

相关文章 - CSS Scroll