在 CSS 中禁用滾動條
本教程將介紹一些禁用網頁滾動條功能的方法。
將 html 和 body 標籤的 overflow 設定為 hidden 以禁用 CSS 中的滾動條
我們可以使用 CSS overflow 屬性來禁用 CSS 中的滾動條。overflow 屬性定義了網頁中滾動條的行為。當元素的內容大於指定區域時，可以隱藏或顯示滾動條。當我們為 overflow 屬性使用 hidden 值時，內容被裁剪到元素的區域，元素的其餘部分將變得不可見。我們可以將其設定為 scroll 以新增滾動條以檢視其餘未剪輯的內容。我們將使用 PHP 在我們的網頁上生成一個長文字。然後我們將禁用滾動條。
例如，在 PHP 中建立一個變數 $text 併為其賦予值 Hello World。使用 for 迴圈迭代 100 次。在顯示變數時不要忘記新增 br 標籤。這將建立 100 行文字 Hello World。將 PHP 包含在 HTML 的正文中。在 CSS 中，選擇 html 和 body 標籤。將邊距設定為 0，並將高度設定為 100%。然後，將 overflow 屬性設定為隱藏。
在下面的示例中，我們將 html 和 body 的 height 設定為 100%。這意味著 body 和 height 將具有其父容器的 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 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