如何使用 max-height 和 overflow-y: scroll 自动滚动 GWT SuggestBox? [英] How to auto scroll GWT SuggestBox with max-height and overflow-y: scroll?

问题描述

如何在保持 SuggestBox 的 PopupPanel 上设置最大高度的情况下自动滚动 GWT SuggestBox?当前，当用户按键盘上键和下键时，建议项的样式会发生变化，按 Enter 将选择列表中当前选定的项.

How can I auto scroll the GWT SuggestBox with max-height set on the PopupPanel holding the SuggestBox? Currently when the user presses keyboard up keys and down keys styles changes on the suggested items and pressing enter will select the currently selected item on the list.

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

When the item is located in lower than the max-height scroll bars doesn't scroll. I tried extending the SuggestBox and inner class DefaultSuggestionDisplay to override moveSelectionDown() and moveSelectionUp() to explicitly call popup.setScrollTop().

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

In order to do this I need access to the absolute top of the currently selected MenuItem therefore need access to SuggestionMenu which is also an inner class of SuggestBox which is private and declared as a private member within DefaultSuggestionDisplay without getter. Since GWT is a JavaScript we can't use reflection to access it.... Does anyone have a workaround for this issue?

谢谢.

推荐答案

我一直在四处寻找，但找不到合适的解决方案(除了重新实现 SuggestBox).以下内容避免了重新实现 SuggestBox:

I've been searching around and couldn't find a proper solution (apart from reimplementing SuggestBox). The following avoids reimplementing 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;
        }
    }
}

}

这篇关于如何使用 max-height 和 overflow-y: scroll 自动滚动 GWT SuggestBox?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！