Blazor 自动滚动文本区域到底部

Question

如何在 Blazor 中的 TextArea 的值每次发生变化时自动滚动到底部？

为了测试它，我尝试使用内联 JS 来更改我在 Stack Overflow 上找到的元素的大小：“ oninput="this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';" "

只要我手动填充文本区域，它就可以工作。但当像我想的那样从后端填充它时它不起作用：

        protected async System.Threading.Tasks.Task TestButtonClick0()
        {
            TextAreaText += ">> SPAM Test \n";
        }

Answer 1

有几种方法可以自动滚动文本区域。但是，它可能无法使用内联 JavaScript 来完成，因为“onchange”和“oninput”等事件是由用户操作触发的。因此，当以编程方式更新文本区域值时，您需要调用 JavaScript 函数来完成此操作。最简单的方法是添加一个 JavaScript 函数，例如：

function scrollToEnd(textarea) {
    textarea.scrollTop = textarea.scrollHeight;
}

然后从 Blazor 页面调用它：

@page "/"
@using Microsoft.JSInterop
@inject IJSRuntime JS

@functions{
    ElementReference TextAreaRef;

    string TextAreaText = "Example auto-scroll\n";

    void ScrollToEnd() {
        JS.InvokeVoidAsync("scrollToEnd", new object[] {TextAreaRef});
    }   
}

<button class="btn btn-primary m-2" @onclick="ScrollToEnd">Add Line</button>
<br/>
<textarea @ref=TextAreaRef value="@TextAreaText" class="form-control" rows="5"></textarea>

请参阅此 Blazor Fiddle 了解工作示例：

https://blazorfiddle.com/s/3ioprd8b