對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）就會出現滾動條效果。
相關推薦：
以上就是html的滾動條樣式設置的詳細內容，更多請關注 其它相關文章！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
