Grow your CSS skills. Land your dream job.

custom scrollbar

  • # March 1, 2011 at 11:07 pm

    Hello…i was curious to know an approach for attacking a custom browser scrollbar. I am assuming webkit is involved.

    Example link…

    http://giangnguyendesign.com/

    Thanks

    # March 2, 2011 at 6:41 pm

    that scrollbar looks normal to me

    # March 2, 2011 at 11:35 pm

    You will only see the custom scroller if browsing in Chrome/Safari…both are integrated with webkit

    # March 4, 2011 at 9:01 am

    Here is another example…

    http://www.thenounproject.com/

    Any Suggestions?

    box
    # March 4, 2011 at 2:16 pm

    Custom scrollbars are not necessarily a good idea. On an accessibility point, changing the ‘standard’ look of the scrollbar can cause confusion for your visitors.

    # March 4, 2011 at 2:32 pm

    I agree completely with box.
    Did you ever bother to look at the css on that site? It’s pretty clear what css is used:

    /* Scrollbar
    
    */

    @media only screen and (-webkit-min-device-pixel-ratio: 0) and (min-device-width: 1025px) {
    html { overflow: hidden; }
    body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 12px;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    }

    ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    }

    ::-webkit-scrollbar-button:start:decrement,
    ::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 10px;
    }

    ::-webkit-scrollbar-button:vertical:increment {
    background-color: #fff;
    }

    ::-webkit-scrollbar-track-piece {
    background-color: #eee;
    -webkit-border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: #ccc;
    -webkit-border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: #ccc;
    -webkit-border-radius: 3px;
    }
    }
    # March 4, 2011 at 2:34 pm

    isnt it just

    ::-webkit-scrollbar-track-piece:vertical:start

    and so forth

    Edit: what they said ^

    # March 5, 2011 at 2:20 am

    ok thank you…i will give it a try

    # March 7, 2011 at 10:05 am

    http://jscrollpane.kelvinluck.com/ is the best example of cross-browser scrollbar-replacer that i’ve crossed so far…

    # December 20, 2011 at 4:01 am

    Use this, crossbrowser compatible http://jscrollpane.kelvinluck.com/

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".