木笛雅設

捲軸控制在網頁設計上算是滿常碰到的問題
尤其當div排版的方法逐漸成為主流時
善用overflow就能有效的的掌握各種捲軸效果

overflow:控制當內容超過顯示區域時捲軸的顯示
overflow-x:x捲軸的顯示
overflow-y:y捲軸的顯示
捲軸顯示有四種狀態
visible(預設):內容完全顯示不嵌入顯示區域
auto:內容嵌入顯示區域，並視情況顯示水平與垂直捲軸
scroll:內容嵌入顯示區域，水平捲軸會出現但視情況顯示可捲動或不可捲動
hidden:內容嵌入顯示區域，捲軸不會出現

各位參考範例網頁:CSS語法應用-overflow控制捲軸範例
overflow:auto

語法
<div style="width:390px;height:300px;overflow:auto;background-color:white;"><img loading="lazy" src="images/overflow-banner1.jpg" width="390" height="163" /><br /> <p>十年生死兩茫茫<br /><br /> 不思量　自難忘<br /><br /> 千里孤墳無處話淒涼<br /><br /> 縱使相逢應不識<br /><br /> 塵滿面　鬢如霜</p><br /> <p>夜來幽夢忽還鄉<br /><br /> 小宣窗　正梳妝<br /><br /> 相顧無言惟有淚千行<br /><br /> 料得年年腸斷處<br /><br /> 明月夜　短松崗</p></div>
你會發現會跑出沒有必要的水平捲軸
當然我們可以試圖把圖片改小來解決這個問題
但在設計上往往需要有圖片填滿寬度的效果
所以我們要把水平軸的捲軸藏起來

overflow-x:hidden　overflow-y:auto

語法
<div style="width:390px;height:300px;overflow-x:hidden;overflow-y:auto;background-color:white;"><img loading="lazy" src="images/overflow-banner1.jpg" width="390" height="163" /><br /> <p>十年生死兩茫茫<br /><br /> 不思量　自難忘<br /><br /> 千里孤墳無處話淒涼<br /><br /> 縱使相逢應不識<br /><br /> 塵滿面　鬢如霜</p><br /> <p>夜來幽夢忽還鄉<br /><br /> 小宣窗　正梳妝<br /><br /> 相顧無言惟有淚千行<br /><br /> 料得年年腸斷處<br /><br /> 明月夜　短松崗</p></div>
注意!你一定要把overflow-y給定義出來
因為如果沒有定義瀏覽器會預設為visible
如此整個內容就會完全的顯示
而無視顯示區域的影響喔

overflow的語法除了用在＜div＞外，也常用在＜textarea＞上原理是相同的
網路上很容易看到把overflow使用在body與iframe內的資訊
尤其是iframe很多人也有捲軸控制的困擾
不過實測發現在IE6.x的版本
放在body與iframe內的overflow語法會失效
有人找出解決之道
就是把網頁開頭的DTD宣告刪除就能正常顯示
木笛倒是建議不要用這種作法
雖然刪除DTD宣告，瀏覽器仍會用預設的宣告解讀網頁編碼
但目前很多的網頁輔助應用如之前介紹的ThickBox
會強烈要求網頁要有屬於某一版本的DTD宣告
否則會有顯示不良的情況

<延伸閱讀>
什麼是DTD?