怎么在CSS3中自定義滾動條樣式-創(chuàng)新互聯(lián)

這篇文章給大家介紹怎么在CSS3中自定義滾動條樣式，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站制作、網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元珠山做網(wǎng)站,已為上家服務(wù),為珠山各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

overflow介紹

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

屬性值

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

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

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

小tips

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

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

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

水平及垂直滾動條

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

自定義滾動條實現(xiàn)

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

滾動條組成部分

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

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

下面來一組簡單自定義滾動條的實現(xiàn)：

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

更多效果如下圖：

關(guān)于怎么在CSS3中自定義滾動條樣式就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)站名稱：怎么在CSS3中自定義滾動條樣式-創(chuàng)新互聯(lián)
URL標題：http://m.kartarina.com/article10/cdsdgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、企業(yè)建站、網(wǎng)站改版、關(guān)鍵詞優(yōu)化、做網(wǎng)站、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)