在 CSS 中隐藏滚动条
本教程将介绍一些在滚动网页的同时隐藏网页中滚动条的方法。
将 ::-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;
}
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