在 CSS 中禁用滾動條

Subodh Poudel 2023年1月30日 2021年10月30日
  1. htmlbody 標籤的 overflow 設定為 hidden 以禁用 CSS 中的滾動條
  2. overflow-x 設定為 hidden 以禁用 CSS 中的水平滾動條
在 CSS 中禁用滾動條

本教程將介紹一些禁用網頁滾動條功能的方法。

htmlbody 標籤的 overflow 設定為 hidden 以禁用 CSS 中的滾動條

我們可以使用 CSS overflow 屬性來禁用 CSS 中的滾動條。overflow 屬性定義了網頁中滾動條的行為。當元素的內容大於指定區域時,可以隱藏或顯示滾動條。當我們為 overflow 屬性使用 hidden 值時,內容被裁剪到元素的區域,元素的其餘部分將變得不可見。我們可以將其設定為 scroll 以新增滾動條以檢視其餘未剪輯的內容。我們將使用 PHP 在我們的網頁上生成一個長文字。然後我們將禁用滾動條。

例如,在 PHP 中建立一個變數 $text 併為其賦予值 Hello World。使用 for 迴圈迭代 100 次。在顯示變數時不要忘記新增 br 標籤。這將建立 100 行文字 Hello World。將 PHP 包含在 HTML 的正文中。在 CSS 中,選擇 htmlbody 標籤。將邊距設定為 0,並將高度設定為 100%。然後,將 overflow 屬性設定為隱藏。

在下面的示例中,我們將 htmlbodyheight 設定為 100%。這意味著 bodyheight 將具有其父容器的 100% 高度。這些容器的高度將等於瀏覽器的高度。文字將被裁剪到瀏覽器的高度,其餘部分將不可見。如果邊距已被其他值覆蓋以禁用滾動條,我們甚至可以將 margin 屬性設定為 0。我們甚至可以使用 overflow-y 代替 overflow 並將其設定為 hidden。它將垂直禁用滾動條。

示例程式碼:

<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
html, body 
{ 
 height: 100%;
 overflow: hidden
}

overflow-x 設定為 hidden 以禁用 CSS 中的水平滾動條

我們可以使用 overflow-x 屬性並將其設定為 hidden 以禁用 CSS 中的水平滾動條。我們可以通過將文字限制為一行來測試水平滾動條的禁用。我們可以在 PHP 中多次迴圈文字並使用 CSS 強制它出現在一行中。

例如,按照上述方法使用 PHP 迴圈文字 Helloo World。不要使用 br 標籤,以免文字出現在下一行。在 CSS 中,將 body 標籤的 display 屬性設定為 inline-block。在 html 標籤中將 white-space 屬性設定為 nowrap。然後,將 overflow-x 設定為 hidden,選擇 body 標籤。

當我們將 display 設定為 inline-block 時,它會強制將文字顯示在一行中。為了在一行中實現文字,我們需要將父容器的 white-space 屬性設定為 nowrap。到目前為止,水平滾動條執行良好。將 overflow-x 設定為 hidden 將根據視口裁剪文字,並且水平滾動條將被禁用。

示例程式碼:

<body> 
 <?php
 $text = "Helloo World";
 for($i=0; $i<100; $i++){
 echo $text; 
 }
 ?>
</body>
html{
white-space:nowrap;
}
body {
display:inline-block;
overflow-x: hidden
}
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