在 CSS 中隐藏滚动条

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

Vue React JavaScript Angular CSS HTML

在 CSS 中隐藏滚动条

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

本篇文章将介绍一些在滚动网页的同时隐藏网页中滚动条的方法。

将 `::-webkit-scrollbar` 伪元素的 `display` 设置为 `none` 以隐藏 CSS 中的滚动条

我们可以使用 ::-webkit-scrollbar 伪元素选择器在 CSS 中设置元素滚动条的样式。但是，这个选择器只适用于基于 Webkit 的浏览器，包括 Chrome、Opera、Safari、Edge 等。我们可以使用::-webkit-scrollbar 伪元素来选择网页的整个滚动条并设置 display 属性为 none。它将允许我们滚动浏览长网页，但它会隐藏滚动条。

例如，创建一个 PHP 文件并在文件中写入基本的 HTML 结构。在 body 部分，打开 PHP 标签 <?php 并在 $text 变量中写入文本 Hello World。循环变量 100 次并显示文本。在 CSS 中，使用 ::-webkit-scrollbar 伪元素来选择滚动条。然后，将 display 属性设置为 none。

在上面的示例中，我们使用 PHP 将文本循环 100 次，使网页变长以滚动网页。PHP 代码导致文本 Hello World 在新行中打印 100 次。将 display 属性设置为 none 会隐藏滚动条，但仍使我们能够滚动页面。这样，我们就可以实现隐藏滚动条的功能。

示例代码：

<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>

::-webkit-scrollbar {
display: none;
}

将 `scrollbar-width` 设置为 `none` 以隐藏 CSS 中的滚动条

我们可以使用 scrollbar-width 属性并将其设置为 none 以隐藏 CSS 中的滚动条。它将从网页中隐藏滚动条。另一个选项 auto 设置默认滚动条，选项 thin 将根据浏览器使滚动条看起来更细。但是，该属性仅适用于 Firefox 浏览器。我们将使用 overflow-y 属性来保持滚动功能剪切内容。当块级元素在顶部和按钮边缘溢出时，它起作用。我们可以使用与第一种方法相同的 PHP 脚本来演示禁用滚动条的情况。

例如，创建一个带有 container 类的 div。在 div 中，按照第一种方法循环文本。在 CSS 中，为容器提供背景颜色以及一些宽度和高度。将 scrollbar-width 属性设置为 none，并将 overflow-y 属性设置为 scroll。

在下面的示例中，将 scrollbar-width 设置为 none 将隐藏滚动条，而将 overflow-y 设置为 scroll 将使滚动功能保持活动状态。这样，我们就可以滚动隐藏滚动条的长页面。

示例代码：

<body>
<div class="container">
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
}
?>
</div>
</body>

.container {
scrollbar-width: none;
background-color: #bbb;
width: 500px;
height: 600px;
overflow-y: scroll;
}

上一篇：在 CSS 中设置背景不透明度

下一篇：在 CSS 中垂直对齐文本

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

本文地址：

迹忆客专注技术分享