如何使用 max-height 和 overflow-y 自动滚动 GWT SuggestBox：滚动？答案

【问题标题】：How to auto scroll GWT SuggestBox with max-height and overflow-y: scroll?如何使用 max-height 和 overflow-y 自动滚动 GWT SuggestBox：滚动？
【发布时间】：2012-01-02 16:00:16
【问题描述】：

如何自动滚动 GWT SuggestBox 并在 PopupPanel 上设置最大高度并持有 SuggestBox？当前，当用户按下键盘向上键和向下键时，建议项目的样式会发生变化，并且按 Enter 将选择列表中当前选定的项目。

当项目位于低于最大高度时，滚动条不会滚动。我尝试扩展SuggestBox 和内部类DefaultSuggestionDisplay 以覆盖moveSelectionDown() 和moveSelectionUp() 以显式调用popup.setScrollTop()。

为了做到这一点，我需要访问当前选定的MenuItem 的绝对顶部，因此需要访问SuggestionMenu，这也是 SuggestBox 的内部类，它是私有的，并在 DefaultSuggestionDisplay 中声明为私有成员没有吸气剂。由于 GWT 是 JavaScript，我们不能使用反射来访问它.... 有人有解决此问题的方法吗？

谢谢。

【问题讨论】：

我不确定，我明白你在说什么。可能你需要展示一些代码或制作一个小提琴来解释问题
我刚刚做的一模一样
最后，你有没有找到任何方法来实现这一点？我和你一样被困在同一个地方，我需要访问当前选定的 MenuItem 才能将其滚动到视图中。谢谢。
我做了，请看下面的答案，如果您有任何问题，请告诉我。

标签： gwt widget scroll

【解决方案1】：

我一直在四处寻找，但找不到合适的解决方案（除了重新实现 SuggestBox）。以下避免了重新实现 SuggestBox：

private static class ScrollableDefaultSuggestionDisplay extends SuggestBox.DefaultSuggestionDisplay {

    private Widget suggestionMenu;

    @Override
    protected Widget decorateSuggestionList(Widget suggestionList) {
        suggestionMenu = suggestionList;

        return suggestionList;
    }

    @Override
    protected void moveSelectionDown() {
         super.moveSelectionDown();
         scrollSelectedItemIntoView();
    }

    @Override
    protected void moveSelectionUp() {
         super.moveSelectionUp();
         scrollSelectedItemIntoView();
    }

    private void scrollSelectedItemIntoView() {
        //                                     DIV          TABLE       TBODY       TR's
        NodeList<Node> trList = suggestionMenu.getElement().getChild(1).getChild(0).getChildNodes();
        for (int trIndex = 0; trIndex < trList.getLength(); ++trIndex) {
            Element trElement = (Element)trList.getItem(trIndex);
            if (((Element)trElement.getChild(0)).getClassName().contains("selected")) {
                trElement.scrollIntoView();

                break;
        }
    }
}

}

【讨论】：

这看起来很有趣...您说这“避免了重新实现 SuggestBox”...但是您是否不必至少重新实现 SuggestBox 构造函数才能使用您的 ScrollableDefaultSuggestionDisplay 而不是原来的 DefaultSuggestionDisplay 进行构造？谢谢！
哦，我想我看到您必须调用公共 3-arg SuggestionBox 构造函数，其第三个参数是 SuggestionBox.SuggestionDisplay（您的 ScrollableDefaultSuggestionDisplay 是其中的一种）。
是的，这行得通...巧妙的解决方案@Perdi Estaquel！这是我在网上找到的唯一一个不会侵入 SuggestBox 的解决方案。我想真由美会在他们自己回答之前及时接受这个答案……

【解决方案2】：

按照 Google 群组上的this discussion，我实现了一个类似的解决方案，由于使用了 JSNI，它更加简洁：

private class ScrollableDefaultSuggestionDisplay extends DefaultSuggestionDisplay {

    @Override
    protected void moveSelectionDown() {
        super.moveSelectionDown();
        scrollSelectedItemIntoView();
    }

    @Override
    protected void moveSelectionUp() {
        super.moveSelectionUp();
        scrollSelectedItemIntoView();
    }

    private void scrollSelectedItemIntoView() {
        getSelectedMenuItem().getElement().scrollIntoView();
    }

    private native MenuItem getSelectedMenuItem() /*-{
        var menu = this.@com.google.gwt.user.client.ui.SuggestBox.DefaultSuggestionDisplay::suggestionMenu;
        return menu.@com.google.gwt.user.client.ui.MenuBar::selectedItem;
    }-*/;
}

【讨论】：

【解决方案3】：

好的，我终于找到了解决方案。我必须根据 GWT SuggestBox 实现创建自己的建议框。但是在自定义实现中遵循以下内容： - 将 ScrollPanel 放置到 PopupPanel，然后将 MenuBar 放置到 ScrollPanel - 在新的内部 SuggestionDisplat 实现的 moveSelectionUp() 和 moveSelectionDown() 中添加以下代码：

 panel.ensureVisible( menu.getSelectedItem( ) );

这不能通过扩展 SuggestBox 来实现，因为我们无法访问 selected MenuItem 除非将受保护的 getSelectionItem() 方法重写为公共方法。

最后添加 CSS：

max-height: 250px;

到您的显示实现中的 popupPanel。

【讨论】：

查看 Perdi Estaquel 的另一个答案，不需要侵入 SuggestBox 本身，而是使用简单的扩展。