首頁 > 文章 > web前端 > DIV怎麼設定捲軸

DIV怎麼設定捲軸

php中世界最好的语言原創: 2017-11-20 12:24:537624瀏覽

在實際操作過程中我們知道，很多DIV都是不夠顯示全部的內容，那麼一定就要設置滾動條，今天就來教大家DIV的滾動條設定。

對div設定捲軸，設定其橫向捲軸和縱向捲軸樣式。所需CSS樣式為overflow-y和overflow-x來設定div盒子物件右側和底部捲軸效果。同時也可以使用CSS樣式設定html框架iframe的捲軸隱藏，接下來要為大家介紹。

一、CSS基礎認知 - TOP

#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 class="divcss5-b">哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈
哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊</div> 
</body> 
</html>

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

第一個盒子「.divcss5-a」內容過多而溢出了DIV盒子，第二個盒子設定了滾動條樣式，所以沒有溢出，縱向右側（Y）出現了可下拉上拉滾動條樣式，橫

如何隱藏CSS div滾動條

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

DIV怎麼設定捲軸

相關文章