TextArea 不会滚动到最大底部答案

【问题标题】：TextArea does not scroll to maximum bottomTextArea 不会滚动到最大底部
【发布时间】：2020-09-10 13:18:15
【问题描述】：

我有一个带有长文本的文本区域，我希望在视图显示时滚动到最大底部：

TextArea textArea = new TextArea();
textArea.setValue(createLongText());
textArea.setHeight("500px");
textArea.setMaxHeight("500px");
textArea.setWidthFull();

textArea.setReadOnly(false);
textArea.getElement().executeJs("this.inputElement.scrollTop = 500");
//text.setReadOnly(true);
textArea.getStyle().set("overflow-y", "auto ! important");
add(currentComponent = textArea);

根据我在网上找到的东西，我尝试了以下所有方法：

text.getElement().executeJs("this.inputElement.scrollTop = 1000"); //or scrollHeight

text.getElement().executeJs("this.scrollTop = 1000"); //or scrollHeight

text.getStyle().set("overflow-y", "auto ! important");

textArea.getElement()
        .executeJs("this.inputElement.selectionStart= 1000;this.inputElement.selectionEnd= 1001;");

但这些都不起作用。

这是我的完整观点：

@Route("")
@PWA(name = "Project Base for Vaadin Flow with Spring", shortName = "Project Base")
@Secured("ROLE_ADMIN")
public class DashboardView extends VerticalLayout {

    private Component currentComponent;

    @Autowired
    public DashboardView() {
        Button longButtonText = new Button("Long textarea");
        longButtonText.addClickListener(e -> {
            if (currentComponent != null)
                remove(currentComponent);

            TextArea textArea = new TextArea();
            textArea.setValue(createLongText());
            textArea.setHeight("500px");
            textArea.setMaxHeight("500px");
            textArea.setWidthFull();

            textArea.setReadOnly(false);
            textArea.getElement().executeJs("this.inputElement.scrollTop = 500");
//          text.setReadOnly(true);
            textArea.getStyle().set("overflow-y", "auto ! important");
            add(currentComponent = textArea);
        });

        Button logoutButton = new Button("logout");
        logoutButton.addClickListener(e -> {
            UI.getCurrent().getSession().close();
            SecurityContextHolder.getContext().setAuthentication(null);
            SecurityContextHolder.clearContext();
            UI.getCurrent().getPage().setLocation("/login");
        });

        add(new HorizontalLayout(longButtonText, logoutButton));

        longButtonText.click();
    }

    private String createLongText() {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < 2000; i++) {
            sb.append(UUID.randomUUID().toString());
            sb.append(System.lineSeparator());
        }
        return sb.toString();
    }
}

我的 vaadin.version：<vaadin.version>14.1.17</vaadin.version>

我应该怎么做才能实现它？

【问题讨论】：

标签： javascript java spring-boot vaadin

【解决方案1】：

实际滚动的元素位于 DOM 层次结构的中间，而不是顶级组件或inputElement。我没有发现任何直接访问此元素的方法，因此您需要以this.inputElement.parentElement.parentElement 的形式使用一点间接方式。

要滚动到最后，您需要执行textArea.getElement().executeJs("this.inputElement.parentElement.parentElement.scrollTop = this.inputElement.parentElement.parentElement.scrollHeight");。

还应该提到，这种方法依赖于与组件内部结构相关的实现细节。这意味着在未来的某个版本中结构发生更改而不会被视为重大更改的风险存在。

【讨论】：