CSS3自定義滾動(dòng)條樣式的示例代碼

發(fā)布時(shí)間：2017-08-21 15:32:35 作者： Visugar個(gè)人博客

本篇文章主要介紹了CSS3自定義滾動(dòng)條樣式的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

滾動(dòng)條是個(gè)很常見的東東，不過某些瀏覽器自帶的滾動(dòng)條確實(shí)不太好看啊，下面可以作為學(xué)習(xí)，探討下自定義滾動(dòng)條的實(shí)現(xiàn)，這樣你的滾動(dòng)條就可以美美的啦。但是，也只能玩玩，因?yàn)橹会槍?duì)webkit內(nèi)核的瀏覽器啊啊啊啊?。?/p>

overflow介紹

定義：overflow 屬性指定當(dāng)它溢出其塊級(jí)容器時(shí),是否剪輯內(nèi)容，渲染滾動(dòng)條或顯示內(nèi)容。

屬性值

overflow:visible    //默認(rèn)值。內(nèi)容不會(huì)被修剪，超出內(nèi)容會(huì)顯示在元素框之外
overflow:hidden     //內(nèi)容會(huì)被修剪。超出內(nèi)容被隱藏
overflow:scroll     //內(nèi)容會(huì)被修剪，瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容
overflow:auto       //如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
overflow:inherit     //規(guī)定從該父元素繼承overflow屬性的值

注：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 “inherit”。

當(dāng)overflow設(shè)為除默認(rèn)值（visible）以外的值時(shí)，將會(huì)創(chuàng)建一個(gè)會(huì) 塊級(jí)式化上下文（清除浮動(dòng)的一種方式），更多可查看深入理解BFC和Margin Collapse

小tips

對(duì)于當(dāng)行文本對(duì)超出部分的處理可使用一下屬性。（同時(shí)需設(shè)置元素的width值，還有 overflow:hidden; 及 white-space:nowrap; )

text-overflow:clip       //修剪文本。
text-overflow:ellipsis   //顯示省略符號(hào)來代表被修剪的文本。
text-overflow:string     //使用給定的字符串來代表被修剪的文本。

對(duì)于多行文本則需要用到不規(guī)范屬性 -webkit-line-clamp ，此處不細(xì)講。

水平及垂直滾動(dòng)條

使用 overflow-x 和 overflow-y 可分別設(shè)置水平及垂直方向上的滾動(dòng)條。

自定義滾動(dòng)條實(shí)現(xiàn)

此部分針對(duì)webkit內(nèi)核的瀏覽器，使用偽類來改變滾動(dòng)條的默認(rèn)樣式，詳情如下：

滾動(dòng)條組成部分

1. ::-webkit-scrollbar                滾動(dòng)條整體部分
2. ::-webkit-scrollbar-thumb          滾動(dòng)條里面的小方塊，能向上向下移動(dòng)（或向左向右移動(dòng)）
3. ::-webkit-scrollbar-track          滾動(dòng)條的軌道（里面裝有Thumb）
4. ::-webkit-scrollbar-button         滾動(dòng)條的軌道的兩端按鈕，由于通過點(diǎn)擊微調(diào)小方塊的位置。
5. ::-webkit-scrollbar-track-piece    內(nèi)層軌道，滾動(dòng)條中間部分
6. ::-webkit-scrollbar-corner         邊角，即垂直滾動(dòng)條和水平滾動(dòng)條相交的地方
7. ::-webkit-resizer                  兩個(gè)滾動(dòng)條的交匯處上用于拖動(dòng)調(diào)整元素大小的小控件

滾動(dòng)條組成結(jié)構(gòu)圖如下：

下面來一組簡(jiǎn)單自定義滾動(dòng)條的實(shí)現(xiàn)：

<div class="box box7">
    <p>這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll，不論是否需要， 用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也 會(huì)出現(xiàn)滾動(dòng)條。 這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為
        scroll，不論是否需要， 用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也 會(huì)出現(xiàn)滾動(dòng)條。
    </p>
</div>


.box8::-webkit-scrollbar {
    width: 12px;
    background-color: #eee;
}

.box8::-webkit-scrollbar-track {
    background-color: #eee;
}

.box8::-webkit-scrollbar-thumb {
    background: #3DB6A4;
}

.box8::-webkit-scrollbar-button:start {
    background: url(./imgs/up.png) no-repeat;
    background-size: 12px 12px;
}

.box8::-webkit-scrollbar-button:end {
    background: url(./imgs/down.png) no-repeat;
    background-size: 12px 12px;
}

更多效果如下圖：