如何实现Vaadin Dialog中容器的独立滚动？

问题场景 #

你创建了一个包含两个Scroller的Dialog，期望左右两个容器能独立滚动，但实际操作中两者会同步滚动，红色容器滚动时会带动整个Dialog内容。相关代码如下：

public class TESTDIALOG extends Dialog {
    public TESTDIALOG() {
        Div left = new Div();
        Div right = new Div();

        left.setHeight("5000px");
        right.setHeight("200px");
        left.getStyle().setBackgroundColor("red");
        right.getStyle().setBackgroundColor("blue");


        var leftWrapper = new Scroller(left);
        var rightWrapper = new Scroller(right);
        leftWrapper.setWidth("50%");
        rightWrapper.setWidth("50%");
        add(new HorizontalLayout(leftWrapper, rightWrapper));
        setWidth("1000px");
    }
}

问题原因 #

当前Dialog未设置固定高度，内部的HorizontalLayout会被左侧5000px高的Div撑大，导致Scroller无法触发自身的滚动逻辑，反而整个Dialog的内容区域一起滚动，造成同步滚动的假象。

解决步骤 #

要让两个Scroller独立滚动，需要限制Dialog的内容高度，并让Scroller填满分配的空间：

• 给Dialog设置固定高度（比如占视口高度的80%，或具体像素值）
• 让HorizontalLayout填满Dialog的内容区域（设置高度为100%）
• 给两个Scroller设置高度为100%，使其在自身范围内处理滚动

修改后的代码 #

public class TESTDIALOG extends Dialog {
    public TESTDIALOG() {
        Div left = new Div();
        Div right = new Div();

        left.setHeight("5000px");
        right.setHeight("200px");
        left.getStyle().setBackgroundColor("red");
        right.getStyle().setBackgroundColor("blue");

        var leftWrapper = new Scroller(left);
        var rightWrapper = new Scroller(right);
        leftWrapper.setWidth("50%");
        // 给Scroller设置高度100%，使其填满父容器的空间
        leftWrapper.setHeight("100%");
        rightWrapper.setWidth("50%");
        rightWrapper.setHeight("100%");

        HorizontalLayout layout = new HorizontalLayout(leftWrapper, rightWrapper);
        // 让HorizontalLayout填满Dialog的内容区域
        layout.setHeight("100%");
        // 去除HorizontalLayout的默认间距，可选
        layout.setSpacing(false);
        add(layout);

        setWidth("1000px");
        // 设置Dialog的固定高度，限制内容区域的范围
        setHeight("80vh");
    }
}

说明 #

• setHeight("80vh")：让Dialog高度占视口的80%，也可以用具体像素如"600px"，根据需求调整
• Scroller设置height="100%"后，会在自身容器高度超过内容高度时触发滚动，不会再撑大外层布局
• HorizontalLayout设置height="100%"确保它填满Dialog的内容区域，让两个Scroller能分到完整的垂直空间

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