在 CSS 中禁用滚动条

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

在 CSS 中禁用滚动条

作者：迹忆客最近更新：2023/03/12 浏览次数：

本篇文章将介绍一些禁用网页滚动条功能的方法。

将 `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
}

上一篇：在 CSS 中将图像右对齐

下一篇：CSS 中的样式选择下拉菜单

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享