Question

我将我的身体元素设置为

body {
   overflow-y: scroll;
 }

这会在我的body元素上创建一个滚动条。当我创建一个滚动条并滚动到底部时，我的页面的主要区域也会滚动。

我在这个主题上发现了一些帖子：Prevent scrolling of parent element? prevent Scroll "bubbling" from element to window但这些帖子不适用于GWT。

我尝试了以下内容：

@UiHandler("panel")
void onPanelMouseOver(MouseOverEvent event) {
    Window.enableScrolling(false);
}


@UiHandler("panel")
void onPanelMouseOut(MouseOutEvent event) {
    Window.enableScrolling(true);
}

这是一个糟糕的解决方案，因为主滚动条消失，页面从左向右移动。我想锁定滚动条而不是隐藏它。隐藏会移动屏幕。

有没有更好的方法来锁定GWT中的主滚动条？

Answer 1

为此目的，只有gwt引入了布局面板的概念。使用RootLayout Panel和其他布局面板。如果您维护层次结构，那么您的应用程序将不会有正文滚动。布局面板还会在浏览器调整大小时调整子窗口小部件的大小。所以你会获得额外的优势

修改

如果你想要一个固定的标题并滚动其余的部分，使用RootLayoutPanel并添加DockLayoutPanel。将标题面板设置为dockPanel北侧，并将滚动面板添加到dockPanel的中心

FlowPanel headerPanel = new FlowPanel(); headerPanel.setWidth("100%"); ScrollPanel bodyPanel = new ScrollPanel(); DockLayoutPanel myApp = new DockLayoutPanel(Unit.PX); myApp.addNorth(headerPanel, 100); myApp.add(bodyPanel); RootLayoutPanel.get().add();

Answer 2

隐藏和锁定正文的滚动条

  body {
        overflow:hidden;
    }

是否有更好的方法来锁定主滚动条而不将其隐藏在GWT中？

2 个答案: