1

私の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 をフォーマットする方法は?

4

1 に答える 1

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でテストしました)

于 2013-09-27T15:39:26.070 に答える