這篇文章給大家介紹怎么在CSS3中自定義滾動(dòng)條樣式,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
創(chuàng)新互聯(lián)公司于2013年創(chuàng)立,是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站制作、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元珠山做網(wǎng)站,已為上家服務(wù),為珠山各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220overflow介紹
定義: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)來(lái)代表被修剪的文本。 text-overflow:string //使用給定的字符串來(lái)代表被修剪的文本。
對(duì)于多行文本則需要用到不規(guī)范屬性 -webkit-line-clamp ,此處不細(xì)講。
水平及垂直滾動(dòng)條
使用 overflow-x
和overflow-y
可分別設(shè)置水平及垂直方向上的滾動(dòng)條。
自定義滾動(dòng)條實(shí)現(xiàn)
此部分針對(duì)webkit內(nèi)核的瀏覽器,使用偽類(lèi)來(lá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)條的軌道的兩端按鈕,由于通過(guò)點(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)圖如下:
下面來(lái)一組簡(jiǎn)單自定義滾動(dòng)條的實(shí)現(xiàn):
<div class="box box7"> <p>這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll,不論是否需要, 用戶(hù)代理都會(huì)提供一種滾動(dòng)機(jī)制。因此,有可能即使元素框中可以放下所有內(nèi)容也 會(huì)出現(xiàn)滾動(dòng)條。 這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll,不論是否需要, 用戶(hù)代理都會(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; }
更多效果如下圖:
關(guān)于怎么在CSS3中自定義滾動(dòng)條樣式就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
網(wǎng)站名稱(chēng):怎么在CSS3中自定義滾動(dòng)條樣式-創(chuàng)新互聯(lián)
URL標(biāo)題:http://muchs.cn/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)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容