我們做網(wǎng)站開發(fā)的時(shí)候，當(dāng)內(nèi)容超出了瀏覽器的高度或者寬度就會出現(xiàn)滾動條；或者某個(gè)元素固定大小，并且設(shè)置了overflow:scroll/auto，內(nèi)容如果超出就出現(xiàn)滾動條，使其不影響頁面其他的布局。很多時(shí)候我就默認(rèn)使用瀏覽器滾動條的默認(rèn)樣式了，直到有一天要做一個(gè)在頁面中同步顯示移動端效果的功能。默認(rèn)的樣式真的是丑??！

overflow常用屬性

既然上面提到了overflow屬性，那么就簡單的介紹一下吧。

設(shè)置文本超出的顯示規(guī)則

• visible：默認(rèn)值，當(dāng)內(nèi)容超出就讓它在超出的地方顯示，不做任何處理。

<p style="width: 200px; height: 50px; background: #ccc">
    漢皇重色思傾國，御宇多年求不得。楊家有女初長成，養(yǎng)在深閨人未識。天生麗質(zhì)難自棄，一朝選在君王側(cè)?；仨恍Π倜纳?，六宮粉黛無顏色。
</p>

visible.png

• hidden：超出的部分直接截?cái)啵娴暮苤苯印?/li>

<p style="width: 200px; height: 50px; background: #ccc; overflow: hidden;">
    漢皇重色思傾國，御宇多年求不得。楊家有女初長成，養(yǎng)在深閨人未識。天生麗質(zhì)難自棄，一朝選在君王側(cè)?；仨恍Π倜纳?，六宮粉黛無顏色。
</p>

hidden.png

• auto：如果內(nèi)容不超出不做處理，超出之后出現(xiàn)滾動條（代碼就不貼了，換個(gè)值的事）

auto不超出.png

auto超出.png

• scroll：和auto不同的是會同時(shí)出現(xiàn)橫向和縱向的滾動條軌道，而且無論內(nèi)容是否超出都會出現(xiàn)。內(nèi)容超出的話滾動條也會出現(xiàn)
  
  image.png

-inherit：繼承父級的overflow屬性值，基本很少使用。

設(shè)置文本超出顯示特定樣式

除了單純的設(shè)置這些屬性外，overflow還具有塊級格式化上下文的功能，具體的可以查看關(guān)于BFC的那一篇文章。還可以配合其他屬性，設(shè)置文本超出的樣式，比如我們經(jīng)常使用的超出的文本顯示省略號等等。

p{
    width: 250px;
    height: 150px; 
    background: #ccc; 
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis/clip;
}
<p>
    楊家有女初長成，養(yǎng)在深閨人未識。天生麗質(zhì)難自棄，一朝選在君王側(cè)。
    回眸一笑百媚生，六宮粉黛無顏色。春寒賜浴華清池，溫泉水滑洗凝脂。
    侍兒扶起嬌無力，始是新承恩澤時(shí)。云鬢花顏金步搖，芙蓉帳暖度春宵。春宵苦短日高起，從此君王不早朝。
</p>

注意這里需要配合使用overflow、white-space、text-overflow這三個(gè)屬性才可以顯示省略號，因?yàn)樵O(shè)置了不換行，所以單行超出就顯示省略號。

ellipsis單行省略號.png

如果是clip則是直接超出就截?cái)唷?/p>

clip.png

如果要設(shè)置多行超出顯示省略號呢，要設(shè)置多行省略號其實(shí)和單行省略感覺并沒有什么關(guān)系。這里需要用到幾個(gè)非規(guī)范屬性（-webkit前綴的）

p{
    width: 250px;
    height: 100px; 
    background: #ccc; 
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
}

這里text-overflow不用寫了，我是試了一下寫不寫都一樣的效果。但是最后的三個(gè)屬性都是不可以少的：

1. display: -webkit-box;將對象作為彈性伸縮盒子模型顯示
2. -webkit-box-orient設(shè)置或檢索伸縮盒對象的子元素的排列方式
3. -webkit-line-clamp指定顯示的文本行數(shù)，也就是省略號出現(xiàn)在第幾號的設(shè)置

多行顯示省略號.png

發(fā)現(xiàn)省略號是顯示出來了，但是為什么下面還接著顯示呢？因?yàn)檫@里我們設(shè)置了固定高度，把固定高度取消。

不設(shè)置高度.png

滾動條樣式

開始介紹本文真正要說的內(nèi)容，就是如何自定義滾動條的樣式。首先滾動條是由很多部分組成的，滑動軌道、滑塊、上下箭頭按鈕等等。我們來依次看看他們對應(yīng)的偽元素。

• ::-webkit-scrollbar：滾動條的整體部分

• ::-webkit-scrollbar-thumb：滑塊

• ::-webkit-scrollbar-track：軌道

• ::-webkit-scrollbar-button：兩端的按鈕

• ::-webkit-scrollbar-corner：邊角，橫向和縱向滾動條相交的角落處

• ::-webkit-scrollbar-track-piece： 滾動條沒有滑塊的軌道部分

• ::-webkit-resizer：某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕)

對于這些偽元素都可以使用邊框、背景、陰影等樣式修飾。

p{
    width: 250px;
    background: #ccc; 
    overflow: scroll;
    height: 100px;
}
p::-webkit-scrollbar{
    width: 10px;
    height: 20px;
    background: yellow;
}

scrollbar.png

-webkit-scrollbar這里設(shè)置滾動條的整體樣式，黃色背景。高度設(shè)置的是橫向滾動條的高度，寬度設(shè)置的是縱向滾動條的寬度。接著看，

p::-webkit-scrollbar-thumb{
    background: blue;
}

scrollbar-thumb.png

這里我們把滾動滑塊設(shè)置成了藍(lán)色，這里設(shè)置滑塊的寬高是沒有效果的。繼續(xù)，

p::-webkit-scrollbar-track{
    background: green;
    border-radius: 10px;
}

scrollbar-track.png

這里我們設(shè)置了軌道的樣式，可以看出軌道的樣式是覆蓋在滾動條整體樣式之上的。軌道也不可以設(shè)置寬高，就是滾動條的寬高。繼續(xù)，

p::-webkit-scrollbar-corner{
    background: red;
}

scrollbar-corner.png

我們設(shè)置了交叉點(diǎn)的空白角落的樣式，這里沒有什么需要多說的，繼續(xù)往下，

p::-webkit-scrollbar-track-piece{
    background: #555;
    border-radius: 10px;
}

scrollbar-track-piece.png

這里設(shè)置的是沒有滑塊的軌道部分的樣式，我們把之前軌道樣式的圓角去掉，可以發(fā)現(xiàn)這個(gè)樣式又是覆蓋在軌道樣式之上的。

p::-webkit-scrollbar-button{
    background: #333;
}

scrollbar-button.png

圖中指向的位置其實(shí)箭頭按鈕的位置，這里只是表明可以自定義，忽略丑的問題。

最后這個(gè)-webkit-resizer屬性我沒有設(shè)置成功，所以不做講解，如果成功應(yīng)該就是下圖指向的這個(gè)位置吧。

-webkit-resizer.png

以上是我們可以通過自定義偽元素來設(shè)置滾動條樣式，其實(shí)還可以通過給這些偽元素添加一些偽類來進(jìn)行設(shè)置。

• :horizontal：設(shè)置水平方向的滾動條

• :vertical：垂直方向的滾動條

• :start：設(shè)置開始按鈕

• :end：設(shè)置結(jié)束按鈕

• ...等等

這里只列舉出一下，具體就不去一個(gè)一個(gè)測試了。只做一個(gè)簡單的示例，有興趣的同學(xué)可以去研究一些。

p::-webkit-scrollbar-button:start{
    background: black;
}

start.png

這樣我們就只設(shè)置了第一個(gè)按鈕的樣式。