如何实现Vaadin垂直Scroller组件自动滚动到底部？

一、修复主动滚动的代码问题 #

你之前的scroll()方法错误使用了window.scrollTo，这是操作整个页面滚动，而非Scroller组件内部的滚动。正确的做法是直接操作Scroller元素的scrollTop属性，同时要确保DOM已经更新完成（新消息组件已渲染）。

修改scroll()方法如下：

private void scroll() {
    // 直接操作当前Scroller元素，滚动到自身的scrollHeight
    getElement().executeJs("this.scrollTop = this.scrollHeight;");
}

如果还是无效，说明新消息添加后DOM尚未完成渲染，需要延迟执行滚动，借助Vaadin的UI更新机制：

public void newMessage(final String msg){
    // 添加消息组件到chatLog
    Label messageLabel = new Label(msg);
    chatLog.add(messageLabel);
    
    // 等待UI更新完成后再滚动
    UI.getCurrent().accessLater(this::scroll);
}

二、关于事件选择的问题 #

你用blur事件能触发只是巧合，因为失去焦点时DOM已经稳定。如果想通过事件自动触发滚动，不建议监听Scroller本身的事件，而是监听内容容器（chatLog）的DOM变化，用MutationObserver检测消息添加：

修改构造函数中的JS代码：

public ChatLog() {
    chatLog = new VerticalLayout();
    addClassName("chat-view-scroller");
    setScrollDirection(Scroller.ScrollDirection.VERTICAL);
    setId("scrolling_div");
    setContent(chatLog);

    // 监听chatLog的DOM变化，当有新子节点添加时滚动到底部
    chatLog.getElement().executeJs("""
        const scroller = document.querySelector('#scrolling_div');
        const observer = new MutationObserver(() => {
            scroller.scrollTop = scroller.scrollHeight;
        });
        observer.observe(this, { childList: true });
        """);
}

这样每次chatLog添加新消息组件时，MutationObserver会检测到子节点变化，自动触发滚动。

额外注意点 #

• 确保Scroller组件的高度是固定的（比如通过CSS设置height: 400px或用Flex布局占满可用空间），否则scrollHeight和clientHeight一致，不会出现滚动条，自然无法滚动。
• 若使用Vaadin 24+的Lit-based组件，Scroller的DOM结构略有不同，可通过this.$.container获取内部滚动容器，但继承Scroller的Java组件直接操作getElement()即可。

内容的提问来源于stack exchange，提问作者Syrious