在 CSS 中隱藏滾動條

Subodh Poudel 2023年1月30日 2021年10月30日
  1. ::-webkit-scrollbar 偽元素的 display 設定為 none 以隱藏 CSS 中的滾動條
  2. scrollbar-width 設定為 none 以隱藏 CSS 中的滾動條
在 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 Poudel avatar Subodh Poudel avatar

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

相關文章 - CSS Scroll