首頁 > 文章 > web前端 > html的捲軸樣式設定

html的捲軸樣式設定

php中世界最好的语言原創: 2017-11-22 13:33:374171瀏覽

如果需要對DIV設定一個捲軸，那麼你可能需要設定捲軸的樣式，橫向或縱向，需要用overflow-y和overflow-x來設置，今天就來跟大家說一下這兩個屬性。

對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）就會出現滾動條效果。

html的捲軸樣式設定

相關文章