在 css 中隐藏滚动条
本篇文章将介绍一些在滚动网页的同时隐藏网页中滚动条的方法。
将 ::-webkit-scrollbar 伪元素的 display 设置为 none 以隐藏 css 中的滚动条
我们可以使用 ::-webkit-scrollbar 伪元素选择器在 css 中设置元素滚动条的样式。但是，这个选择器只适用于基于 webkit 的浏览器，包括 chrome、opera、safari、edge 等。我们可以使用::-webkit-scrollbar 伪元素来选择网页的整个滚动条并设置 display 属性为 none。它将允许我们滚动浏览长网页，但它会隐藏滚动条。
例如，创建一个 php 文件并在文件中写入基本的 html 结构。在 body 部分，打开 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. "
";
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. "
";
}
?>
.container {
scrollbar-width: none;
background-color: #bbb;
width: 500px;
height: 600px;
overflow-y: scroll;
}
