[公告] 痞客邦「應用市集」新 App 上架-iFontCloud Professional[公告] 痞客邦後台發表文章提供插入多張圖片新功能[公告]痞客邦新服務上線 部落客商店聚集就在《痞市集》[公告] 部落格「快捷功能BAR」改版介紹[公告] 痞客邦「快捷功能BAR」6月4日改版通知

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

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

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

語法

你會發現會跑出沒有必要的水平捲軸
當然我們可以試圖把圖片改小來解決這個問題
但在設計上往往需要有圖片填滿寬度的效果
所以我們要把水平軸的捲軸藏起來

overflow-x:hidden overflow-y:auto

語法

注意!你一定要把overflow-y給定義出來
因為如果沒有定義瀏覽器會預設為visible
如此整個內容就會完全的顯示
而無視顯示區域的影響喔

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

<延伸閱讀>
什麼是DTD?

Posted by fennser at 痞客邦 PIXNET 留言(6) 引用(0) 人氣()


open trackbacks list Trackbacks (0)

留言列表 (6)

Post Comment
  • Ray
  • Thanks

    遇到ScrollBar的問題
    剛好Google到這篇文章
    也因此解決我的問題
    謝啦
  • George
  • 我也是Google到的,感謝此篇文章解決我的疑惑
  • clazziquai
  • 感謝...在谷歌搜尋到的
    解決了問題
  • eason
  • 感謝分享, 用css整合網頁捲軸真的幫助很大;
    若使用iframe 還有點擔心整和程式中會有問題^^
  • 訪客
  • 請問一下

    妳的捲軸條 要怎麼用

    我只要改變顏色 不想改變捲軸條的樣式
  • Lun
  • 感謝解決我的疑惑 <div style="width:auto;height:auto;overflow-x:hidden;overflow-y:auto;">

You haven’t logged in yet, please use guest status to leave message. You can also log in with above service account and leave message

other options