對div設定捲軸，設定其橫向捲軸和縱向捲軸樣式。所需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）就會出現捲軸效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
