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

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 和 Firefox 不支持。

那么如何在 GWT 中使用 CSS 来格式化 ScrollPanel，使其在所有浏览器中都能正常工作？

Answer 1

我刚刚检查过，以下在 chrome 中对我来说很好

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 对其进行了测试)