GWT - 隐藏水平滚动条

Question

我在想...是否有一种方法可以使用GWT标准ScrollPane隐藏水平滚动条？我的意思是可能不使用外部CSS样式等？或者您可以推荐更优化的方法来实现效果吗？

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

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

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

谢谢。

- user592704

---

你是否有兴趣始终隐藏水平滚动条？ - Andrea Boscolo

@Andrea Boscolo，你说得对。我想隐藏水平的，只显示垂直的； - user592704

当您设置该样式时，您是否在代码中为其设置名称，以便它选择CSS类“.a-scroll”？ - Terrell Plotzki

@Terrell Plotzki 我认为 setStyleName("a-scroll"); 应该覆盖先前的样式，是吗？ - user592704

不要只按照文档来做。你可能需要使用火狐浏览器的Firebug或Chrome开发者工具来检查DOM，以查看应用了哪些样式。 - Terrell Plotzki

Answer 1

默认情况下，ScrollPanel 的 overflow 属性被设置为 auto（即根据需要显示滚动条），以获取最佳的跨浏览器解决方案。所以，浏览器会决定何时显示这样的滚动条。此外，调用 scrollPanel.setAlwaysShowScrollBars(false) 是无用的，因为它已经在构造时被调用了（在 initialize() 方法中）。

不管怎样，我发现你请求的是一个已知问题。

如果你想始终隐藏水平滚动条，则需要在 ScrollPanel 的可滚动元素上设置 overflow-x: hidden 属性（就像你尝试过的那样，但这个面板不是一个简单的带有 overflow 属性的 div）。请尝试以下方式：

public class MyScrollPanel extends ScrollPanel {

  public void setAlwaysHideHorizontalScrollBar(boolean alwaysHide) {
    getScrollableElement().getStyle().setOverflowX(alwaysHide ? Overflow.HIDDEN : Overflow.AUTO);
  }
  // ... and the like.
}

请记住，如果您设置了上述内容，在某些浏览器中，您将无法再水平滚动。此外，overflow-x/y是CSS3属性，而overflow是CSS2属性。所以这可能不是您想要的。

在这种情况下，一些CSS技巧可以帮助隐藏滚动条，但仍允许滚动，类似于这个。

另一个选择可能是使用CustomScrollPanel小部件，它允许隐藏滚动条，并提供自定义滚动条，例如零透明度样式（虽然不是最好的选择）。

当然，另一个选项是推出自己基于div的小部件（也许扩展SimplePanel），并具有您需要的所有样式，如该问题所建议的。

- Andrea Boscolo

---

好的，谢谢。我稍后会尝试这个解决方案并向您报告我的结果。 - user592704

Answer 2

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

如果您继续

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

它应该停止显示。

- noone

Answer 3

如果内容不超出容器，您可以使用以下方法隐藏滚动条

scrollPanel.setAlwaysShowScrollBars(false);

如果您的滚动条仍然显示，您可能需要查看您的内容。

- Terrell Plotzki

---

不，我希望支持overflow-y属性，只能垂直滚动。 - user592704

这甚至不是该方法的本意。它的目的是为了在触摸设备上配置滚动条显示。 - Tomáš Zato