css的overflow屬性如何定義捲軸

滾動條在網頁中經常見到，卻並沒有受到足夠的重視。只有當因為滾動條的問題需要處理相容性時，才進行偵錯操作。本章就帶給大家css滾動條的常見內容。

一：條件
   　　捲軸和overflow是緊密相關的。只有當父級的overflow的值是auto或scroll，且元素的內容超出元素區域時，才有可能出現捲軸

##二：預設

　　無論什麼瀏覽器，預設捲軸都來自，而不是。因為元素預設有8px的margin。若捲軸來自元素，則捲軸與頁面則應該有8px的間距，實際上並沒有間距，所以捲軸來自元素

三：尺寸

　　透過以下程式碼可得出捲軸會佔用瀏覽器的可用寬度為：

chrome/firefox/IE 17px
safari 21px

.box{
    width: 400px;
    overflow: scroll;
}
.in{
    *zoom: 1;
}

<div class="box">
    <div id="in" class="in"></div>
</div>

console.log(400-document.getElementById('in').clientWidth);

相容

【1】預設情況下IE7-瀏覽器預設有一條縱向捲軸，而其他瀏覽器則沒有

//IE7-浏览器 
html{overflow-y: scroll;}
//其他浏览器
html{overflow: auto;}
//去除页面默认滚动条
html{overflow: hidden;}

【2】IE7-瀏覽器與其他瀏覽器關於捲軸的寬度設定機制不同

.box{
    width: 200px;
    height: 100px;
    background-color: pink;
    overflow: scroll;
}
.in{
    width: 100%;
    height: 60px;
    background-color: lightgreen;
}

<div class="box">
    <div class="in">测试文字</div>
 </div>

父級box出現縱向捲軸，實際上子級in的可用寬度就縮小了。 IE7-瀏覽器的子級寬度忽略了該捲軸的寬度，子級寬度=400*100%=400px，則出現了橫向滾動條；而其他瀏覽器的子級寬度考慮到該滾動條的寬度，子級寬度=(400-捲軸寬度)*100%

左邊為IE7-瀏覽器，右邊為其他瀏覽器

##【3】水平居中跳動問題

　　當一個元素在頁面中水平居中時，頁面中出現縱向捲軸會發生水平居中的跳出問題。解決方法如下:

//IE8-默认
html{overflow-y: scroll}//IE9+，100vw表示浏览器的宽度，100%表示可用内容的宽度
.container{padding-left: calc(100vw-100%)}

自訂

【1】IE

#　　IE瀏覽器支援透過CSS樣式來改變捲軸的部件的自訂顏色

scrollbar-face-color 滚动条凸出部分的颜色
scrollbar-shadow-color 立体滚动条阴影的颜色
scrollbar-highlight-color 滚动条空白部分的颜色
scrollbar-3dlight-color 滚动条亮边的颜色
scrollbar-darkshadow-color 滚动条强阴影的颜色
scrollbar-track-color 滚动条的背景颜色 
scrollbar-arrow-color 上下按钮上三角箭头的颜色 
scrollbar-base-color  滚动条的基本颜色

【2】webkit

　　webkit核心的瀏覽器支援捲軸自訂樣式，但和IE不同，webkit是透過偽類別來實現的組成

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动滑块
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层轨道
::-webkit-scrollbar-corner 边角
::-webkit-scrollbar-button 两端按钮

[注意]當為捲軸設定寬高樣式為百分比值時，是相對視窗大小來說的

##[注意]捲軸的層疊關係為scrollbar在最底層，往上依序是track外層軌道，track-piece內層軌道。而button按鈕、corner邊角和thumb滑桿有最頂層

四：偽類相關

:horizontal
//horizontal伪类适用于任何水平方向上的滚动条

:vertical
//vertical伪类适用于任何垂直方向的滚动条

:decrement
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮

:increment
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮

:start
//start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面

:end
//end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面

:double-button
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。

:single-button
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。

:no-button
no-button伪类表示轨道结束的位置没有按钮。

:corner-present
//corner-present伪类表示滚动条的角落是否存在。

:window-inactive
//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
}

::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条下面的按钮上的状态*/
}

############################################# ################

以上是css的overflow屬性如何定義捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章！