Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
1,942
在進入主題之前，還是先來說明overflow的意義吧。其實很簡單，就是當一個區域(例如)裡的內文，超過其所限定的時候，該如何處理，overflow提供了auto、hidden，只舉我常用的來說明。
一、垂直捲軸
先看此html：
.theDiv{
border:1px solid black;
width:300px;
height:200px;
}
這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文
顯示如圖：
div的寬度設定為300px，而高度為200px。顯而易見地，內文超出了此區域，而且會如圖示一樣，內文往下穿越div區域了。
這時就需要垂直捲軸了，也非常常用，只要修改.theDiv的css即可：
.theDiv{
border:1px solid black;
width:300px;
height:200px;
overflow:auto; /* 新增這行：當溢位時，自動顯示捲軸 */
}
顯示如圖：
完美，內文在div正常顯示出來，且出來垂直捲軸了。
這沒有什麼問題。但有的時候(某些情況需求)，我們需要顯示水平捲軸，但水平捲軸似乎不容易出現。
二、水平捲軸
先看此html：
.scrollable {
border:1px solid black;
width:500px;
height:200px;
}
.items{
width: 800px;
border:1px solid red;
}
這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文這是內文
顯示如圖：(請注意，內層div的寬度是設定的比外層div還要來得大)
因為內層div設定的較大，所以看圖上可看出，紅色框框超出了黑色框框，但我們真正的顯示範圍是要在黑色框框內，超出的必需以水平捲軸來顯示，所以需要修改.scrollable的css：
.scrollable {
border:1px solid black;
width:500px;
height:200px;
overflow: auto; /* 新增這行 */
}
修改完後顯示如圖：
大功告成！
所以在設定水平捲軸的顯示時，有三個地方要注意：
1、需要用兩層div(div只是以此為例，你也可以用其它的元素)來圍住
2、內層div的寬度需大於外層
3、外層div設定overflow:auto
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Facebook
Twitter
寫了
5860316篇文章，獲得
23313次喜歡