成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css scrollbar樣式設(shè)置

張春雷 / 2903人閱讀

摘要：表示遞增的按鈕或軌道碎片，例如可以使區(qū)域向下或者向左移動(dòng)的區(qū)域和按鈕適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一對(duì)按鈕。

一 前言

在CSS 中，如果我們?cè)趬K級(jí)容器上設(shè)置了屬性:

overflow:scroll /* x y 方向都會(huì)*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll  /*只是y方向*/

當(dāng)塊級(jí)內(nèi)容區(qū)域超出塊級(jí)元素范圍的時(shí)候，就會(huì)以滾動(dòng)條的形式展示，你可以滾動(dòng)里面的內(nèi)容，里面的內(nèi)容不會(huì)超出塊級(jí)區(qū)域范圍。
有時(shí)候我們需要自定義滾動(dòng)條的樣式，比如一開始就它顯示，比如想改變滾動(dòng)條的顏色，設(shè)置軌道的樣式等，那么這篇文章就是為你準(zhǔn)備的。

二 正文

1.認(rèn)識(shí)滾動(dòng)條

設(shè)置scrollbar的為CSS偽元素，對(duì)應(yīng)上圖的數(shù)字：

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

屬性介紹：

::-webkit-scrollbar    //滾動(dòng)條整體部分
::-webkit-scrollbar-button   //滾動(dòng)條兩端的按鈕
::-webkit-scrollbar-track   // 外層軌道
::-webkit-scrollbar-track-piece    //內(nèi)層軌道，滾動(dòng)條中間部分（除去）
::-webkit-scrollbar-thumb //滾動(dòng)條里面可以拖動(dòng)的那個(gè)
::-webkit-scrollbar-corner   //邊角
::-webkit-resizer   ///定義右下角拖動(dòng)塊的樣式

2.設(shè)置樣式

demo
進(jìn)入頁(yè)面，打開控制臺(tái)工具，選中其中一個(gè)樣式，就能看到該樣式的CSS源碼。

/*定義滾動(dòng)條高寬及背景
 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
::-webkit-scrollbar
{
    width:16px;
    height:16px;
    background-color:#F5F5F5;
}
/*定義滾動(dòng)條軌道
 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
    background-color:#F5F5F5;
}
/*定義滑塊
 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb
{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color:#555;
}

任何對(duì)象都可以設(shè)置：邊框、陰影、背景圖片等等，創(chuàng)建的滾動(dòng)條任然會(huì)按照操作系統(tǒng)本身的設(shè)置來(lái)完成其交互的行為。下面的偽類可以應(yīng)用到上面的偽元素中。

:horizontal//適用于任何水平方向上的滾動(dòng)條
:vertical//適用于任何垂直方向的滾動(dòng)條
:decrement//適用于按鈕和軌道碎片。表示遞減的按鈕或軌道碎片，例如可以使區(qū)域向上或者向右移動(dòng)的區(qū)域和按鈕
:increment//適用于按鈕和軌道碎片。表示遞增的按鈕或軌道碎片，例如可以使區(qū)域向下或者向左移動(dòng)的區(qū)域和按鈕
:start//適用于按鈕和軌道碎片。表示對(duì)象（按鈕軌道碎片）是否放在滑塊的前面
:end //適用于按鈕和軌道碎片。表示對(duì)象（按鈕軌道碎片）是否放在滑塊的后面
:double-button//適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一對(duì)按鈕。也就是軌道碎片緊挨著一對(duì)在一起的按鈕。
:single-button//適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一個(gè)按鈕。也就是軌道碎片緊挨著一個(gè)多帶帶的按鈕。
:no-button//表示軌道結(jié)束的位置沒有按鈕。
:corner-present//表示滾動(dòng)條的角落是否存在。
:window-inactive//適用于所有滾動(dòng)條，表示包含滾動(dòng)條的區(qū)域，焦點(diǎn)不在該窗口的時(shí)候。

用法舉例：

::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn"t in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it"s being hovered by the mouse */
}

3.IE瀏覽器
兼容IE的參考鏈接：https://www.cnblogs.com/koley...

三 后記

Chrome能很好的支持自定義滾動(dòng)條，其它的瀏覽器在不同程度上支持自定義滾動(dòng)條樣式。
參考文章：http://blog.csdn.net/cysear/a...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113000.html

相關(guān)文章

  • css scrollbar樣式設(shè)置

    摘要：表示遞增的按鈕或軌道碎片，例如可以使區(qū)域向下或者向左移動(dòng)的區(qū)域和按鈕適用于按鈕和軌道碎片。判斷軌道結(jié)束的位置是否是一對(duì)按鈕。 一 前言 在CSS 中，如果我們?cè)趬K級(jí)容器上設(shè)置了屬性: overflow:scroll /* x y 方向都會(huì)*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 當(dāng)塊級(jí)內(nèi)容區(qū)域...

    104828720 評(píng)論0 收藏0

  • CSS進(jìn)階篇--設(shè)置滾動(dòng)條樣式

    摘要：用于所有滾動(dòng)條軌道，指示滾動(dòng)條圓角是否顯示。用于所有的滾動(dòng)條軌道，指示應(yīng)用滾動(dòng)條的某個(gè)頁(yè)面容器元素是否當(dāng)前被激活。 因?yàn)樵诂F(xiàn)在的大部分項(xiàng)目中很多都用到了滾動(dòng)條，有時(shí)候用到模擬的滾動(dòng)條，現(xiàn)在說下滾動(dòng)條的CSS也能解決。 比如網(wǎng)易郵箱的滾動(dòng)條樣子很好看，就是利用的CSS來(lái)設(shè)置的，而且是webkit瀏覽器的。如圖所示： showImg(https://segmentfault.com/img...

    elva 評(píng)論0 收藏0

  • 瀏覽器滾動(dòng)條 --- 自定義“衣裳”

    摘要：由于種種原因，瀏覽器的默認(rèn)滾動(dòng)條衣裳實(shí)在是，為了美，本人結(jié)合萬(wàn)維網(wǎng)各大神給的經(jīng)驗(yàn)和自己的實(shí)踐，做了此篇總結(jié)。標(biāo)識(shí)對(duì)象是否放到滑塊的后面。該偽類可以用于按鈕和內(nèi)層軌道。用于所有滾動(dòng)條軌道，指示滾動(dòng)條圓角是否顯示。由于種種原因，瀏覽器的默認(rèn)滾動(dòng)條衣裳實(shí)在是 (ˉ▽￣～)~~，為了美，本人結(jié)合萬(wàn)維網(wǎng)各大神給的經(jīng)驗(yàn)和自己的實(shí)踐，做了此篇總結(jié)。若有錯(cuò)誤，請(qǐng)?jiān)谠u(píng)論里給出，我會(huì)及時(shí)更改。 我在電腦上打開了...

    mtunique 評(píng)論0 收藏0

  • 如何自定義CSS滾動(dòng)條的樣式？

    摘要：需求有的時(shí)候我們不想使用瀏覽器默認(rèn)的滾動(dòng)條樣式，因?yàn)椴粔蚨ㄖ苹兔烙^?？稍O(shè)置豎直水平方向的滾動(dòng)條可以設(shè)置水平方向的滾動(dòng)條，不加默認(rèn)是豎直方向。自定義滾動(dòng)條樣式可自定義的樣式比較少，只能控制滾動(dòng)條各個(gè)部分顯示的顏色，定制性較低。 歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由前端林子發(fā)表 本文會(huì)介紹CSS滾動(dòng)條選擇器，并在demo中展示如何在Webkit內(nèi)核瀏覽器和I...

    linkFly 評(píng)論0 收藏0

  • 如何自定義CSS滾動(dòng)條的樣式？

    摘要：可設(shè)置豎直水平方向的滾動(dòng)條可以設(shè)置水平方向的滾動(dòng)條，不加默認(rèn)是豎直方向。自定義滾動(dòng)條樣式自定義滾動(dòng)條樣式可自定義的樣式比較少，只能控制滾動(dòng)條各個(gè)部分顯示的顏色，定制性較低。歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由前端林子發(fā)表 本文會(huì)介紹CSS滾動(dòng)條選擇器，并在demo中展示如何在Webkit內(nèi)核瀏覽器和IE瀏覽器中，自定義一個(gè)橫向以及一個(gè)縱向的滾動(dòng)條。 0.需求...

    kviccn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<