JavaFX中如何使ScrollPane内容不超出视口边界？

问题核心 #

滚动ScrollPane时，内容会与视口的橙色边框重叠，原因是直接给viewport设置的边框是绘制在其内部空间内，并未对内容形成约束边界。

解决方案 #

放弃直接给viewport添加边框，改为通过ScrollPane的padding模拟边框效果，让内容被严格限制在视口区域内：

1. 修改样式表 scrollpane.css #

.scroll-pane {
    -fx-background-color: darkorange; /* 模拟边框的颜色 */
    -fx-padding: .7em; /* 模拟边框的宽度 */
}

.scroll-pane .viewport {
    -fx-background-color: black; /* 内容区域的背景色 */
}

.root {
    -fx-background-color: black;
}

2. 调整Java代码（可选优化） #

保持原有逻辑，仅需确保内容容器自动适配视口宽度即可，无需额外修改核心布局代码：

private void makeScrollPane() {
    VBox[] contentArray = new VBox[15];
    for (int x = 0; x < 15; x++) {
        String boxIndex = String.valueOf(random());
        String boxNum = String.valueOf(random());
        String lbl1   = "Title " + boxIndex;
        String lbl2   = "Item " + boxIndex;
        contentArray[x] = getVBox(lbl1, lbl2, boxNum);
    }
    VBox vBoxContent = new VBox(contentArray);
    // 可选：给内容容器加内边距，让内容与视口边缘保留间隙
    // vBoxContent.setPadding(new Insets(10));
    scrollPane = new ScrollPane(vBoxContent);
    scrollPane.fitToWidthProperty().set(true);
    scrollPane.fitToHeightProperty().set(true);
    scrollPane.getStylesheets().add(scrollStyle);
    scrollPane.hbarPolicyProperty().set(ScrollPane.ScrollBarPolicy.NEVER);
    scrollPane.vbarPolicyProperty().set(ScrollPane.ScrollBarPolicy.NEVER);
}

原理说明 #

通过给ScrollPane设置padding，将视口（viewport）挤到容器中间，padding区域的颜色替代了原来的边框色。此时视口的边界就是内容的约束边界，滚动时内容只会在视口内部显示，不会与“边框”区域重叠。这种方式利用布局空间实现视觉边框，比直接给视口加边框更符合组件的布局逻辑。

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