在 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