Question

在我的Test.ui.xml

中

<g:ScrollPanel height="200px" addStyleNames="{res.css.scrollPanel}"> some widget here</g:ScrollPanel>

在css中

.scrollPanel{
   scrollbar-3dlight-color:#FFD700;
    scrollbar-arrow-color:#FFFF00;
    scrollbar-base-color:#FF6347;
    scrollbar-darkshadow-color:#FFA500;
    scrollbar-face-color:#008080;
    scrollbar-highlight-color:#FF69B4;
    scrollbar-shadow-color:#FF00FF;
  }

它在IE中完美运行，但在Firefox + Chrome中却没有？为什么呢？

有趣的是，在Gwt代码中，我们为ScrollPanel设置了背景或颜色

    ScrollPanel sp=new ScrollPanel();
    sp.getElement().getStyle().setBackgroundColor("orange");

那么，必须有一种方法为Css中的ScrollPanel设置背景吗？

仅限IE支持滚动条格式化，Chrome＆amp; Firefox没有。

那么如何在GWT中使用CSS来格式化ScrollPanel，它可以在所有浏览器中使用？

Answer 1

我刚刚检查过，以下内容对我来说很好用铬

ScrollPanel scrollable = new ScrollPanel();
scrollable.getElement().getStyle().setBackgroundColor("orange");

将以下内容放在UiBinder文件中的css中也适用于我：

<ui:style>
.scrollable {
background-color:pink;
}
</ui:style>

和

addStyleNames='{style.scrollable}'

你确定滚动面板中的小部件没有占用整个面板而你却看到了吗？如果用其他任何带有背景颜色的东西填充它，橙色将在它后面并消失。

像这样的东西会在webkit浏览器上放一个滚动条：

::-webkit-scrollbar {
height: 12px;
width: 12px;
background: blue;
}
::-webkit-scrollbar-thumb {
background: red;
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); 
}
::-webkit-scrollbar-corner {
background: blue;
}

（取自https://productforums.google.com/forum/?hl=en#!category-topic/chrome/give-feature-feedback-and-suggestions/mGJ19Khi0SE，我刚用GWT ScrollPanel测试了它）

如何在GWT中使用CSS格式化ScrollPanel？

1 个答案: