1

in my Test.ui.xml

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

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

It working perfectly in IE, but not in Firefox + Chrome? Why?

Interestingly, in the Gwt Code we got setting Background or color for ScrollPanel

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

So, there must be a way to set background for ScrollPanel in Css right?

Seem only IE support scrollbar formatting,Chrome & Firefox don't.

so How to format ScrollPanel by using CSS in GWT that will work in all browser?

4

1 回答 1

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

于 2013-09-27T15:39:26.070 回答