GWT - 隐藏水平滚动条

时间:2013-04-29 19:24:53

标签: css gwt

我想知道......有没有办法隐藏GWT标准ScrollPane的水平滚动条? 我的意思是也许不使用外部CSS样式等?或者你可以推荐一种更优化的方式来实现这种效果吗?

...关于CSS,我现在尝试为我的ScrollPane设置这样的样式

.a-scroll {
overflow-y: scroll;
overflow-x: hidden;
}

...但似乎它不起作用且水平滚动条仍然可见:S那么有解决方法吗?

由于

3 个答案:

答案 0 :(得分:6)

默认情况下,ScrollPanel的{​​{1}}属性设置为overflow(即,滚动条将根据需要显示)以获取最多的跨浏览器解决方案。因此,由浏览器决定何时显示此类滚动条。此外,调用auto是无用的,因为已经在构造时调用(在scrollPanel.setAlwaysShowScrollBars(false)方法中)。

无论如何,我发现你要求的是known issue

如果你想总是隐藏水平滚动条,你需要在initialize()的可滚动元素上设置overflow-x: hidden属性(正如你所尝试的那样,但是这样的面板是不是一个带有ScrollPanel属性的简单div。试试:

overflow

请记住,如果您设置上述内容,在某些浏览器中您将无法再水平滚动。另外public class MyScrollPanel extends ScrollPanel { public void setAlwaysHideHorizontalScrollBar(boolean alwaysHide) { getScrollableElement().getStyle().setOverflowX(alwaysHide ? Overflow.HIDDEN : Overflow.AUTO); } // ... and the like. } 是CSS3属性,而overflow-x/y是CSS2。所以这可能不是你想要的。

在这种情况下,一些CSS技巧可以帮助隐藏滚动条但仍然允许滚动,如this

Anothe选项可以使用overflow窗口小部件,除其他外,它允许隐藏滚动条,例如,提供一个零不透明样式的自定义滚动条(不是最好的,很难)。 / p>

当然,另一种选择可能是推出您自己的基于div的小部件(可能会扩展CustomScrollPanel),并提供您需要的所有样式,如问题所示。

答案 1 :(得分:1)

可能有点便宜,但垂直条宽度被添加到小部件的宽度,这意味着小部件不再完全显示。因此水平条显示,您可以滚动查看通过垂直滚动条隐藏的内容。

如果你去

scrollPanel.setAlwaysShowScrollBars(false);
scrollPanel.setWidth("normalwidth + 8px");

它应该停止显示。

答案 2 :(得分:-1)

如果内容没有使用

溢出容器,则可以隐藏滚动条

scrollPanel.setAlwaysShowScrollBars(false);

如果您的滚动条仍在显示,则可能需要查看您的内容。