首頁 > 文章 > web前端 > 怎樣使用DIV捲軸

怎樣使用DIV捲軸

php中世界最好的语言原創: 2017-11-20 15:55:401894瀏覽

很多地方都可以用到DIV的捲軸，今天教大家怎麼用CSS操作DIV的捲軸。怎麼隱藏，顯示DIV捲軸

首先是CSS基礎認知

overflow-y:scroll; 總是顯示縱向捲軸

overflow- y:visible : 不剪下內容也不新增縱向捲軸

了解：overflow-y手冊http://www.divcss5.com/shouce/c_overflowy.shtml

# overflow-x:scroll; 總是顯示橫向捲軸

overflow-x:visible : 不剪下內容也不新增橫向捲軸

了解：overflow-x手冊http: //www.divcss5.com/shouce/c_overflowx.shtml

了解css overflow

div設定捲軸實例

#DIVCSS5通過對第一個DIV物件設定div寬度、div高度、div邊框樣式，並在DIV盒子裡新增示範文字內容，第二個盒子設定相同的CSS樣式，盒子文字內容相同，並設定橫向和縱向捲軸，觀察效果。

第一個盒子CSS命名為「divcs5-a」,第二個DIV盒子樣式選擇器命名為「divcss5-b」。

1、具體完整html原始碼如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>div滚动条 在线演示 www.divcss5.com</title> 
<style> 
.divcss5-a,.divcss5-b{ width:150px; height:100px; float:left; border:1px solid #F00} 
.divcss5-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} 
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */ 
</style> 
</head> 
<body> 
<div class="divcss5-a">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div> 
 测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div> 
</body> 
</html>

為了觀察效果我們對兩個DIV盒子都設定基礎相同的CSS樣式和相同的文字內容。對「.divcss5-b」設定了X和y（橫向和縱向的捲軸樣式。）

#透過結果我們很明顯的發現第一個盒子「.divcss5-a」內容過多而溢出了DIV盒子，第二個盒子設定了滾動條樣式，所以沒有溢出，縱向右側（Y）出現了可下拉上拉滾動條樣式，橫向底部（X）出現滾動條效果但不可左右拉動，這是因為文字內容不能撐開DIV寬度，如果是大於DIV設定寬度的圖片這樣橫向底部（X）就會出現捲軸效果。

那麼如何隱藏CSS div捲軸？
DIV預設是沒有捲軸的，如果加了捲軸樣式，去掉後捲軸自然就會消失。如果是框架iframe出現的捲軸，如果要想X橫向隱藏滾動條，只需要設定overflow-x:visible或overflow-x:hidden；如果想iframe出現Y縱向捲軸隱藏可以設置CSS樣式overflow-y:visible或overflow-y:hidden即可隱藏捲軸。

以上就是怎麼隱藏，顯示DIV滾動條，有興趣的朋友可以自己操作一下。

怎樣使用DIV捲軸

相關文章