Vaadin 上的 TextArea 自动滚动到底部 UI

Question

我有一个 Polymer Template 视图，它在 Vaadin 14 前端包含一个 TextArea。对于这个视图，我有相应的 Java 配套文件。每次出现 action/event 时，我的文本区域的内容都会被附加，因此从技术上讲，它充当控制台。当这个文本区域有一定数量的行时，滚动条会出现，但是向文本区域添加新值会导致仍然显示最高值。每次更改其值时是否有可能以某种方式自动滚动到文本区域的底部？我检查了一些仅适用于以前版本的 Vaadin 的解决方案，不适用于流程。这可以使用 Java API 来完成，还是应该使用一些 css/javaScript 解决方法？

到目前为止我尝试滚动但没有成功：

 Page page = UI.getCurrent().getPage();

 page.executeJs("document.getElementById('myTextAreaId').scrollTop =  
          document.getElementById('myTextAreaId').scrollHeight",
          myTextArea.getElement());

感谢任何帮助。

Answer 1

我试图重现你的逻辑，在某些事件中，一个新值被附加到文本区域。我在模板中定义了一个 updateScrollPosition JS 方法，以便在每次将新值附加到 TextArea 时更新 scrollTop 属性。该方法包含：

let textAreaElement = this.shadowRoot.querySelector("vaadin-text-area").shadowRoot.querySelector("div[part='input-field']");

textAreaElement.scrollTop = Number.MAX_SAFE_INTEGER;

为了简单起见，我使用最大整数，因为 specification 它将 scrollTop 设置为最大值。

当文本区域值发生变化时，您需要使用 getElement().callJsFunction("updateScrollPosition");

调用定义的函数

总体而言，我的模板如下所示：

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-text-field/src/vaadin-text-area.js';
import '@vaadin/vaadin-button/src/vaadin-button.js';

class TextareaComponent extends PolymerElement {

    static get template() {
        return html`
<style include="shared-styles">
                :host {
                    display: block;
                    height: 100%;
                }
            </style>
<vaadin-text-area label="Write a description" placeholder="Add detailed explanation" id="textareaId"></vaadin-text-area>
<vaadin-button id="buttonID">
 Add text 
</vaadin-button>
`;
    }
    updateScrollPosition(){
        let textAreaElement = this.shadowRoot.querySelector("vaadin-text-area").shadowRoot.querySelector("div[part='input-field']");
        textAreaElement.scrollTop = Number.MAX_SAFE_INTEGER;
    }

    static get is() {
        return 'textarea-component';
    }

    static get properties() {
        return {
            // Declare your properties here.
        };
    }
}

customElements.define(TextareaComponent.is, TextareaComponent);

和 java 对应的是这样的

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.polymertemplate.Id;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.templatemodel.TemplateModel;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.polymertemplate.PolymerTemplate;

/**
 * A Designer generated component for the textarea-component template.
 *
 * Designer will add and remove fields with @Id mappings but
 * does not overwrite or otherwise change this file.
 */
@Tag("textarea-component")
@JsModule("./src/textarea-component.js")
public class TextareaComponent extends PolymerTemplate<TextareaComponent.TextareaComponentModel> {

    @Id("textareaId")
    TextArea area;

    @Id("buttonID")
    Button button;

    /**
     * Creates a new TextareaComponent.
     */
    public TextareaComponent() {
        // You can initialise any data required for the connected UI components here.
        area.setMaxHeight("150px");
        button.addClickListener(event -> {
           area.setValue(area.getValue() + " New button click!");
           // this is important line
           getElement().callJsFunction("updateScrollPosition");
        });
    }

    /**
     * This model binds properties between TextareaComponent and textarea-component
     */
    public interface TextareaComponentModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }
}

Vaadin 上的 TextArea 自动滚动到底部 UI

TextArea autoscroll to bottom on Vaadin UI

javascript

user-interface

textarea

vaadin

vaadin-flow