html的滾動條樣式設置

2020-03-24 18:13:51

字體：大中小

來源：轉載

供稿：網友

如果需要對DIV設置一個滾動條，那么你可能需要設置滾動條的樣式，橫向或者縱向，需要用overflow-y和overflow-x來設置，今天就來給大家說一下這倆個屬性。

對div設置滾動條，設置其橫向滾動條和縱向滾動條樣式。所需CSSyangshi_10628_1.html' target='_blank'>CSS樣式為overflow-y和overflow-x來設置div盒子對象右側和底部滾動條效果。同時也可以使用CSS樣式設置html框架iframe的滾動條隱藏，

overflow-y:scroll; 總是顯示縱向滾動條

overflow-y:visible : 不剪切內容也不添加縱向滾動條

div設置滾動條實例

通過對第一個DIV對象設置div寬度、div高度、div邊框樣式，并在DIV盒子里添加演示文字內容，第二個盒子設置相同的CSS樣式，盒子文字內容相同，并設置橫向和縱向滾動條，觀察效果。

第一個盒子CSS命名為“divcs5-a”,第二個DIV盒子樣式選擇器命名為“div-b”。

1、具體完整html源代碼如下：

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>div滾動條 在線演示 </title> <style> .div-a,.div-b{ width:150px; height:100px; float:left; border:1px solid #F00} .div-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} /* css注釋說明：設置第二個盒子與第一個盒子間距為10px，并設置了橫縱滾動條樣式 */ </style> </head> <body> <div class="div-a">測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容</div>  <div class="div-b">測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容測試內容</div> </body> </html>

為了觀察效果我們對兩個DIV盒子都設置基礎相同的CSS樣式和相同的文字內容。對“.div-b”設置了X和y（橫向和縱向的滾動條樣式。）

說明：第一個盒子“.div-a”內容過多而溢出了DIV盒子，第二個盒子設置了滾動條樣式，所以沒有溢出，縱向右側（Y）出現了可下拉上拉滾動條樣式，橫向底部（X）出現滾動條效果但不可左右拉動，這是因為文字內容不能撐開DIV寬度，如果是大于DIV設置寬度的圖片這樣橫向底部（X）就會出現滾動條效果。