CSS滾動條

時間 2019-11-12

標籤 css 滾動條欄目 CSS 简体版

原文原文鏈接

前面的話

　　滾動條在網頁中常常見到，卻並無受到足夠的重視。只有當由於滾動條的問題須要處理兼容性時，才進行調試操做。本文就滾動條的常見內容進行梳理css

條件

　　滾動條和overflow是緊密相關的。只有當父級的overflow的值是auto或scroll，而且元素的內容超出元素區域時，纔有可能出現滾動條html

默認

　　不管什麼瀏覽器，默認滾動條均來自<html>，而不是<body>。由於<body>元素默認有8px的margin。若滾動條來自<body>元素，則滾動條與頁面則應該有8px的間距，實際上並無間距，因此滾動條來自<html>元素web

尺寸

　　經過如下代碼可得出滾動條會佔用瀏覽器的可用寬度爲：chrome

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%spa

　　左圖爲IE7-瀏覽器，右圖爲其餘瀏覽器firefox

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

　　當一個元素在頁面中水平居中時，頁面中出現縱向滾動條會發生水平居中的跳出問題。解決方法以下:調試

//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 {
/*當鼠標在水平滾動條下面的按鈕上的狀態*/
}

經常使用設置

.box{
    width: 200px;
    height: 100px;
    background-color: pink;
    overflow: scroll;
    font-size: 20px;
    line-height: 40px;
}
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
.box::-webkit-scrollbar
{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
}

/*定義滾動條軌道 內陰影+圓角*/
.box::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定義滑塊 內陰影+圓角*/
.box::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

<div class="box">我是特別長特別長特別長特別長特別長特別長特別長特別長特別長特別長特別長特別長的測試文字</div>

樣式類舉

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。