自定义 CustomScrollPanel 滚动条？

Question

我想自定义 CustomScrollPanel 的滚动条。我想自定义滚动条，我想分别启用和禁用垂直和水平滚动条。

这是 MyScrollPanel：

public class MyScrollPanel extends Composite implements HasWidgets {

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

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

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

    public interface Resources extends ClientBundle {

        @Source({"test/web/client/widgets/MyScrollPanel.css"})
        Css css();
    }

    public interface Css extends CssResource, AppCss {

        String resizeLayoutPanel();
        String customScrollPanel();

    }

    Resources resources;


    private ResizeLayoutPanel resizeLayoutPanel;
    private CustomScrollPanel customScrollPanel;


    public MyScrollPanel() {
        resources = GWT.create(Resources.class);
        resources.css().ensureInjected();
        resizeLayoutPanel = new ResizeLayoutPanel();
        resizeLayoutPanel.setStyleName(resources.css().resizeLayoutPanel());


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

        customScrollPanel.addStyleName(resources.css().customScrollPanel());


        resizeLayoutPanel.add(customScrollPanel);
        initWidget(resizeLayoutPanel);
    }


    @Override
    public void add(Widget w) {
        customScrollPanel.add(w);
    }


    @Override
    public void clear() {
        customScrollPanel.clear();
    }


    @Override
    public Iterator<Widget> iterator() {
        return customScrollPanel.iterator();
    }


    @Override
    public boolean remove(Widget w) {
        return customScrollPanel.remove(w);
    }




}

我找到了这个帖子GWT CustomScrollPanel example，但它并没有解决问题。

如何自定义滚动条并分别启用和禁用垂直和水平滚动条？

如何设置自定义滚动条的样式？

Answer 1

CustomScrollPanel 提供了两种方法：

.getHorizontalScrollbar()
.getVerticalScrollbar()

然后您可以在必要时显示/隐藏它们，或应用您需要的任何 CSS。