對div設置滾動條，設置其橫向滾動條和縱向滾動條樣式。所需CSSyangshi_10628_1.html' target='_blank'>CSS樣式為overflow-y和overflow-x來設置div盒子對象右側(cè)和底部滾動條效果。同時也可以使用CSS樣式設置html框架iframe的滾動條隱藏，
overflow-y:scroll; 總是顯示縱向滾動條
overflow-y:visible : 不剪切內(nèi)容也不添加縱向滾動條
div設置滾動條實例
通過對第一個DIV對象設置div寬度、div高度、div邊框樣式，并在DIV盒子里添加演示文字內(nèi)容，第二個盒子設置相同的CSS樣式，盒子文字內(nèi)容相同，并設置橫向和縱向滾動條，觀察效果。
第一個盒子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">測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容</div> <div class="div-b">測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容測試內(nèi)容</div> </body> </html>為了觀察效果我們對兩個DIV盒子都設置基礎相同的CSS樣式和相同的文字內(nèi)容。對“.div-b”設置了X和y（橫向和縱向的滾動條樣式。）
說明：第一個盒子“.div-a”內(nèi)容過多而溢出了DIV盒子，第二個盒子設置了滾動條樣式，所以沒有溢出，縱向右側(cè)（Y）出現(xiàn)了可下拉上拉滾動條樣式，橫向底部（X）出現(xiàn)滾動條效果但不可左右拉動，這是因為文字內(nèi)容不能撐開DIV寬度，如果是大于DIV設置寬度的圖片這樣橫向底部（X）就會出現(xiàn)滾動條效果。
相關推薦：
以上就是html的滾動條樣式設置的詳細內(nèi)容，更多請關注 其它相關文章！
鄭重聲明：本文版權歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
新聞熱點
疑難解答
