GWT CustomScrollPanelの例

Question

GWTのCustomScrollPanelとスクロールバーのカスタマイズ方法を知りましたが、例や設定方法が見つかりません。カスタムスクロールバーを使用している例がありますか？

Answer 1

これはネイティブスクロールバーをカスタマイズする方法ですが、さらにカスタマイズ可能なVerticalScrollbarとHorizo​​ntalScrollbarを実装する独自のスクロールバークラスを開発することもできます。

リソース（スタイル）定義：CustomScrollPanelて

public class ScrollResourcesContainer { 

    public interface ScrollPanelResources extends CustomScrollPanel.Resources 
    { 
     @Override 
     @Source({ "ScrollPanel.css", CustomScrollPanel.Style.DEFAULT_CSS }) 
     CustomScrollPanel.Style customScrollPanelStyle(); 
    } 

    public interface HorizontalResources extends NativeHorizontalScrollbar.Resources 
    { 
     @Override 
     @Source({ "HorizontalScrollbar.css", NativeHorizontalScrollbar.StyleTransparant.DEFAULT_CSS }) 
     NativeHorizontalScrollbar.Style nativeHorizontalScrollbarStyle(); 
    } 

    public interface VerticalResources extends NativeVerticalScrollbar.Resources 
    { 
     @Override 
     @Source({ "VerticalScrollbar.css", NativeVerticalScrollbar.StyleTransparant.DEFAULT_CSS }) 
     NativeVerticalScrollbar.Style nativeVerticalScrollbarStyle(); 
    } 
} 

使用法：

CustomScrollPanel csp = new CustomScrollPanel((ScrollResourcesContainer.ScrollPanelResources) GWT.create(ScrollResourcesContainer.ScrollPanelResources.class)); 
    csp.setHorizontalScrollbar(new NativeHorizontalScrollbar((HorizontalResources) GWT.create(HorizontalResources.class)), 
    AbstractNativeScrollbar.getNativeScrollbarHeight()); 
    csp.setVerticalScrollbar(new NativeVerticalScrollbar((VerticalResources) GWT.create(VerticalResources.class)), 
    AbstractNativeScrollbar.getNativeScrollbarWidth()); 

Answer 2

GWTでの垂直スクロールバーのなめらかなスクロールバーを取得するには、VerticalScrollbarに次のコードを追加する必要があります。 css。 これはgmailのようにIEでは機能しません。

/* Turn on a 16x16 scrollbar */ 
::-webkit-scrollbar { 
    width: 16px; 
    height: 16px; 
} 

/* Turn on single button up on top, and down on bottom */ 
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment { 
    display: block; 
} 

/* Turn off the down area up on top, and up area on bottom */ 
::-webkit-scrollbar-button:vertical:start:increment, 
::-webkit-scrollbar-button:vertical:end:decrement { 
    display: none; 
} 

/* Place The scroll down button at the bottom */ 
::-webkit-scrollbar-button:end:increment { 
    background-image: url(images/scroll_cntrl_dwn.png); 
} 

/* Place The scroll up button at the up */ 
::-webkit-scrollbar-button:start:decrement { 
    background-image: url(images/scroll_cntrl_up.png); 
} 

/* Top area above thumb and below up button */ 
::-webkit-scrollbar-track-piece:vertical:start { 
    background-image: url(images/scroll_gutter_top.png), url(images/scroll_gutter_mid.png); 
    background-repeat: no-repeat, repeat-y; 
} 

/* Bottom area below thumb and down button */ 
::-webkit-scrollbar-track-piece:vertical:end { 
    background-image: url(images/scroll_gutter_btm.png), url(images/scroll_gutter_mid.png); 
    background-repeat: no-repeat, repeat-y; 
    background-position: bottom left, 0 0; 
} 

/* The thumb itself */ 
::-webkit-scrollbar-thumb:vertical { 
    height: 56px; 
    -webkit-border-image: url(images/scroll_thumb.png) 8 0 8 0 stretch stretch; 
    border-width: 8 0 8 0; 
} 

Answer 3

CSSを垂直/水平の両方に使用することに興味がある人は、これが私が使用しているものです。

Horizo​​ntalScrollbar.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; 
}