HTML 中的捲軸
Sep 04, 2024 pm 04:54 PM
水平或垂直條，用於使用滑鼠、觸控板或鍵盤(pán)向上、向下、向左或向右移動(dòng)視窗中的檢視區(qū)域。您可以按一下軌道以使捲軸移動(dòng)到視窗的特定部分，或按一下捲軸並將其拖曳到特定位置。下面是滾動(dòng)條的螢?zāi)唤貓D，可以幫助您了解更多。
上圖是我們典型的預(yù)設(shè)垂直捲軸的Word文件。此欄有時(shí)也稱為手柄，用於拖曳視窗的檢視區(qū)域。我們的桿滑動(dòng)的區(qū)域稱為軌道。
無(wú)論視窗包含的資訊是否溢出，視窗上通常都會(huì)出現(xiàn)預(yù)設(shè)的捲軸。但現(xiàn)在，這些滾動(dòng)條都變成了互動(dòng)的；也就是說(shuō)，如果資訊溢出，就會(huì)出現(xiàn)垂直或/和水平滾動(dòng)條。
在本文中，我們將嘗試使用簡(jiǎn)單的 HTML 建立捲軸，或者應(yīng)該說(shuō)，互動(dòng)式捲軸。
HTML ||滾動(dòng)條||溢位
HTML 有辦法解決您能想到的任何問(wèn)題，如果沒(méi)有，那麼在 CSS 屬性的幫助下，HTML 可確保您獲得所需的結(jié)果。此類 CSS 屬性之一稱為「溢出」屬性，該屬性會(huì)套用於
HTML 中捲軸中的「Overflow」屬性的用途是什麼？
「溢出」屬性可協(xié)助您決定是否應(yīng)該提供資訊或數(shù)據(jù)，或內(nèi)容從元素框中溢出，例如
但是，使用「overflow」屬性並且對(duì)於具有特定高度的區(qū)塊元素的內(nèi)容有效。幾乎所有網(wǎng)頁(yè)瀏覽器也支援「溢出」屬性。使用此屬性的語(yǔ)法非常簡(jiǎn)單。
文法：
溢位：捲動(dòng)|自動(dòng)|可見(jiàn)|隱藏|初始|繼承;
從上述選項(xiàng)中，我們可以使用這些值中的任何一個(gè)作為溢位屬性。溢出屬性的應(yīng)用之一是與
讓我們來(lái)了解Scrollbox。
HTML ||捲軸||滾動(dòng)框
HTML 中的滾動(dòng)框只是一個(gè)在使用時(shí)有自己的捲軸的框。?因此，如果一個(gè)人把他的訊息或段落放在滾動(dòng)框中，他就不需要擔(dān)心滾動(dòng)條，因?yàn)樗鼈儗⑴c滾動(dòng)框一起可供他使用。
HTML 中建立的滾動(dòng)框範(fàn)例：
通常，透過(guò)使用
下面是一個(gè)帶有overflow:scroll 的 HTML 滾動(dòng)框的簡(jiǎn)單基本範(fàn)例程式碼。
<body> <div style = "width: 150px; height: 150px; line-height: 3em; overflow:scroll; border: thin #000 solid; padding: 5px;">
有一個(gè)「div」元素使用「overflow:auto」來(lái)建立捲軸。
</div> </body>
這會(huì)導(dǎo)致捲軸的明確外觀。您可以在下圖中觀察結(jié)果。
正如我們之前看到的，「overflow」屬性幾乎沒(méi)有可用的值。上面是「overflow:scroll」的範(fàn)例。其他如下圖所示：
‘溢位：自動(dòng)。 ’
它創(chuàng)造出與overflow:scroll相同的效果，但是使用overflow:auto，只有在資料溢出時(shí)才會(huì)出現(xiàn)捲軸；否則，滾動(dòng)框?qū)⒊霈F(xiàn)，沒(méi)有任何滾動(dòng)條。
見(jiàn)下圖：
上面的兩張圖片都使用了 Overflow 屬性，其值為「auto」。?請(qǐng)注意第一個(gè)影像有捲軸，而第二個(gè)影像沒(méi)有捲軸。這是‘overflow:auto’屬性的基本功能；也就是說(shuō)，只有在資料溢位時(shí)才會(huì)出現(xiàn)捲軸。
‘overflow:hidden’
This property has a special purpose. Even if some data is in an overflowing state, overflow property with value ‘hidden’ will contain it inside the window and do not let the user know. Observe below.
Observe that, though there is no scroll bar and the data is overflowed, yet it is perfectly contained inside the visible area. ‘Overflow:visible’ has the opposite effect. It shows the overflowed content, and the content displays over the visible window.
Apart from applying the ‘overflow’ property to a