在 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