CSS customized scroll bar in div

后端 未结 19 1411
夕颜
夕颜 2020-11-21 11:05

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div and not the whole page?

19条回答
  •  悲哀的现实
    2020-11-21 11:51

    This is what Google has used in some of its applications for a long time now. See in the code that, if you apply next classes, they somehow hide the scrollbar in Chrome, but it still works.

    The classes are jfk-scrollbar, jfk-scrollbar-borderless, and jfk-scrollbar-dark

    .testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
    .content{ height: 700px}
    
    /* The google css code for scrollbars */
    ::-webkit-scrollbar {
        height: 16px;
        overflow: visible;
        width: 16px
    }
    ::-webkit-scrollbar-button {
        height: 0;
        width: 0
    }
    ::-webkit-scrollbar-track {
        background-clip: padding-box;
        border: solid transparent;
        border-width: 0 0 0 7px
    }
    ::-webkit-scrollbar-track:horizontal {
        border-width: 7px 0 0
    }
    ::-webkit-scrollbar-track:hover {
        background-color: rgba(0, 0, 0, .05);
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
    }
    ::-webkit-scrollbar-track:horizontal:hover {
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
    }
    ::-webkit-scrollbar-track:active {
        background-color: rgba(0, 0, 0, .05);
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
    }
    ::-webkit-scrollbar-track:horizontal:active {
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
    }
    .jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
        background-color: rgba(255, 255, 255, .1);
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
    }
    .jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
    }
    .jfk-scrollbar-dark::-webkit-scrollbar-track:active {
        background-color: rgba(255, 255, 255, .1);
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
    }
    .jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
    }
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .2);
        background-clip: padding-box;
        border: solid transparent;
        border-width: 0 0 0 7px;
        min-height: 28px;
        padding: 100px 0 0;
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
    }
    ::-webkit-scrollbar-thumb:horizontal {
        border-width: 7px 0 0;
        padding: 0 0 0 100px;
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .4);
        box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
    }
    ::-webkit-scrollbar-thumb:active {
        background-color: rgba(0, 0, 0, 0.5);
        box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
    }
    .jfk-scrollbar-dark::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, .3);
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
    }
    .jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
    }
    .jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, .6);
        box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
    }
    .jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
        background-color: rgba(255, 255, 255, .75);
        box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
    }
    .jfk-scrollbar-borderless::-webkit-scrollbar-track {
        border-width: 0 1px 0 6px
    }
    .jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
        border-width: 6px 0 1px
    }
    .jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
        background-color: rgba(0, 0, 0, .035);
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
    }
    .jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
        background-color: rgba(255, 255, 255, .07);
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
    }
    .jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
        border-width: 0 1px 0 6px
    }
    .jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
        border-width: 6px 0 1px
    }
    ::-webkit-scrollbar-corner {
        background: transparent
    }
    body::-webkit-scrollbar-track-piece {
        background-clip: padding-box;
        background-color: #f5f5f5;
        border: solid #fff;
        border-width: 0 0 0 3px;
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
    }
    body::-webkit-scrollbar-track-piece:horizontal {
        border-width: 3px 0 0;
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
    }
    body::-webkit-scrollbar-thumb {
        border-width: 1px 1px 1px 5px
    }
    body::-webkit-scrollbar-thumb:horizontal {
        border-width: 5px 1px 1px
    }
    body::-webkit-scrollbar-corner {
        background-clip: padding-box;
        background-color: #f5f5f5;
        border: solid #fff;
        border-width: 3px 0 0 3px;
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
    }
    .jfk-scrollbar::-webkit-scrollbar {
        height: 16px;
        overflow: visible;
        width: 16px
    }
    .jfk-scrollbar::-webkit-scrollbar-button {
        height: 0;
        width: 0
    }
    .jfk-scrollbar::-webkit-scrollbar-track {
        background-clip: padding-box;
        border: solid transparent;
        border-width: 0 0 0 7px
    }
    .jfk-scrollbar::-webkit-scrollbar-track:horizontal {
        border-width: 7px 0 0
    }
    .jfk-scrollbar::-webkit-scrollbar-track:hover {
        background-color: rgba(0, 0, 0, .05);
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
    }
    .jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
    }
    .jfk-scrollbar::-webkit-scrollbar-track:active {
        background-color: rgba(0, 0, 0, .05);
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
    }
    .jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
    }
    .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
        background-color: rgba(255, 255, 255, .1);
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
    }
    .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
    }
    .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
        background-color: rgba(255, 255, 255, .1);
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
    }
    .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
    }
    .jfk-scrollbar::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .2);
        background-clip: padding-box;
        border: solid transparent;
        border-width: 0 0 0 7px;
        min-height: 28px;
        padding: 100px 0 0;
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
    }
    .jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
        border-width: 7px 0 0;
        padding: 0 0 0 100px;
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
    }
    .jfk-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .4);
        box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
    }
    .jfk-scrollbar::-webkit-scrollbar-thumb:active {
        background-color: rgba(0, 0, 0, 0.5);
        box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
    }
    .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, .3);
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
    }
    .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
    }
    .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, .6);
        box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
    }
    .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
        background-color: rgba(255, 255, 255, .75);
        box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
    }
    .jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
        border-width: 0 1px 0 6px
    }
    .jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
        border-width: 6px 0 1px
    }
    .jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
        background-color: rgba(0, 0, 0, .035);
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
    }
    .jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
        background-color: rgba(255, 255, 255, .07);
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
    }
    .jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
        border-width: 0 1px 0 6px
    }
    .jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
        border-width: 6px 0 1px
    }
    .jfk-scrollbar::-webkit-scrollbar-corner {
        background: transparent
    }
    body.jfk-scrollbar::-webkit-scrollbar-track-piece {
        background-clip: padding-box;
        background-color: #f5f5f5;
        border: solid #fff;
        border-width: 0 0 0 3px;
        box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
    }
    body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
        border-width: 3px 0 0;
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
    }
    body.jfk-scrollbar::-webkit-scrollbar-thumb {
        border-width: 1px 1px 1px 5px
    }
    body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
        border-width: 5px 1px 1px
    }
    body.jfk-scrollbar::-webkit-scrollbar-corner {
        background-clip: padding-box;
        background-color: #f5f5f5;
        border: solid #fff;
        border-width: 3px 0 0 3px;
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
    }
    Look Ma' my scrollbars doesn't have arrows

    content, content, content
    content, content, content
    content, content, content s
    content, content, content
    content, content, content
    content, content, content d
    content, content, content

    Look Ma' my scrollbars dissapear in chrome

    content, content, content
    content, content, content
    content, content, content s
    content, content, content
    content, content, content
    content, content, content d
    content, content, content

    http://jsfiddle.net/76kcuem0/32/

    I just found it useful to remove the arrows from the scrollbars. As of 2015 it's been used in Google Maps when searching for places in the list of results in its material design UI.

提交回复
热议问题