GWT CustomScrollPanel example

Question

I found out about GWT\'s CustomScrollPanel and how you can customize the scroll bar, but I can\'t find any examples or how to set it up. Are there any examples out there th

Answer 1

If anyone is interested in having the CSS for both vertical/horizontal, this is what I'm using.

HorizontalScrollbar.css

/* ***********
 * SCROLLBAR *
 * ***********/
.nativeHorizontalScrollbar::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
}

/* *************
 * BUTTON AREA *
 * *************/
.nativeHorizontalScrollbar::-webkit-scrollbar-button:horizontal
{
    background-color: transparent;
}

/* Increment scroll left/right button. */
.nativeHorizontalScrollbar::-webkit-scrollbar-button:start:decrement,
.nativeHorizontalScrollbar::-webkit-scrollbar-button:end:increment
{
    display: block;

    width: 10px;
    height: 8px;

    background-repeat: no-repeat;
    background-size: 10px 8px;
}

/* Increment scroll left button. */
.nativeHorizontalScrollbar::-webkit-scrollbar-button:start:decrement
{
    background-image: url('images/scroll-left.png');
}

/* Increment scroll right button. */
.nativeHorizontalScrollbar::-webkit-scrollbar-button:end:increment
{
    background-image: url('images/scroll-right.png');
}

/* Jump left/right buttons. */
.nativeHorizontalScrollbar::-webkit-scrollbar-button:horizontal:start:increment,
.nativeHorizontalScrollbar::-webkit-scrollbar-button:horizontal:end:decrement
{
    display: none;
}

/* ******************
 * TRACKING SECTION *
 * ******************/
.nativeHorizontalScrollbar::-webkit-scrollbar-track:horizontal
{
    background-color: transparent;
}

/* Area between the thumb and the left button. */
.nativeHorizontalScrollbar::-webkit-scrollbar-track-piece:horizontal:start
{

}

/* Area between the thumb and and right button. */
.nativeHorizontalScrollbar::-webkit-scrollbar-track-piece:horizontal:end
{

}

/* 
 * The tracking area.
 * This is the area that the thumb travels along.
 */
.nativeHorizontalScrollbar::-webkit-scrollbar-track-piece
{
    background-color: rgba(255, 255, 255, 0.1);
}

/* The tracking piece. */
.nativeHorizontalScrollbar::-webkit-scrollbar-thumb:horizontal
{
    height: 15px;

    background-color: rgba(255, 255, 255, 0.75);

    border: none;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* ********
 * CORNER *
 * ********/
.nativeHorizontalScrollbar::-webkit-scrollbar-corner:horizontal
{
    background-color: transparent;
}

/* *********
 * RESIZER *
 * *********/
.nativeHorizontalScrollbar::-webkit-scrollbar-resizer:horizontal
{
    background-color: transparent;
}

VerticalScrollbar.css /* *********** * SCROLLBAR * * ***********/

.nativeVerticalScrollbar::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
}

/* *************
 * BUTTON AREA *
 * *************/
.nativeVerticalScrollbar::-webkit-scrollbar-button:vertical
{
    background-color: transparent;
}

/* Increment scroll up/down buttons. */
.nativeVerticalScrollbar::-webkit-scrollbar-button:start:decrement,
.nativeVerticalScrollbar::-webkit-scrollbar-button:end:increment
{
    display: block;

    width: 10px;
    height: 8px;

    background-repeat: no-repeat;
    background-size: 10px 8px;
}

/* Increment scroll up button. */
.nativeVerticalScrollbar::-webkit-scrollbar-button:start:decrement
{
    background-image: url('images/scroll-up.png');
}

/* Increment scroll down button. */
.nativeVerticalScrollbar::-webkit-scrollbar-button:end:increment
{
    background-image: url('images/scroll-down.png');
}

/* Jump up/down buttons. */
.nativeVerticalScrollbar::-webkit-scrollbar-button:vertical:start:increment,
.nativeVerticalScrollbar::-webkit-scrollbar-button:vertical:end:decrement
{
    display: none;
}

/* ******************
 * TRACKING SECTION *
 * ******************/
.nativeVerticalScrollbar::-webkit-scrollbar-track:vertical
{
    background-color: transparent;
}

/* Area between the thumb and the up button. */
.nativeVerticalScrollbar::-webkit-scrollbar-track-piece:vertical:start
{

}

/* Area between the thumb and and down button. */
.nativeVerticalScrollbar::-webkit-scrollbar-track-piece:vertical:end
{

}

/* 
 * The tracking area.
 * This is the area that the thumb travels along.
 */
.nativeVerticalScrollbar::-webkit-scrollbar-track-piece
{
    background-color: rgba(255, 255, 255, 0.1);
}

/* The tracking piece. */
.nativeVerticalScrollbar::-webkit-scrollbar-thumb:vertical
{
    height: 15px;

    background-color: rgba(255, 255, 255, 0.75);

    border: none;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* ********
 * CORNER *
 * ********/
.nativeVerticalScrollbar::-webkit-scrollbar-corner:vertical
{
    background-color: transparent;
}

/* *********
 * RESIZER *
 * *********/
.nativeVerticalScrollbar::-webkit-scrollbar-resizer:vertical
{
    background-color: transparent;
}