GWT自定义滚动面板示例

我了解了GWT的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

使用：

    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());

---

要获得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;
}

---

如果有人对垂直/水平CSS都感兴趣，这就是我正在使用的

水平滚动条.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;
}

垂直滚动条.css /* *********** *滚动条* ************/

.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;
}

---

css文件是允许定制的吗？你能提供一个VerticalScrollbar.css的示例吗？是的，它们是，但是你不能做很多事情，因为它们使用的是本机滚动条，如果你需要大量定制，你可能需要创建一个完全定制的DOM实现。例如，您应该通过解压GWT-user.jar并在AbstractNativeScrollbar.java和NativeVerticalScrollbar.java NativeVerticalScrollbar.ui.xml和NativeVerticalScrollbarTransparent.css上查看com\google\GWT\user\client\ui来检查GWT源代码。同样，您也可以对水平滚动条执行此操作。请查看以下链接以了解更多详细信息。感谢VerticalScrollbar.css，这真的帮了大忙。您有HorizontalScrollbar.css示例吗？