React.js中如何让Timeline区块内容完整显示且不溢出到Contact区块

• 代码中给.sections下所有直接子区块强制设置了固定高度height: calc(100vh - 70px)，当Timeline的内容高度超过这个固定值时，就会溢出到下方的Contact区块
• .sections设置了scroll-snap-type: y mandatory强制滚动捕捉规则，会强行按视口高度切割内容，也会导致长内容的Timeline无法完整展示
• 额外布局问题：.sections设置了display: flex但没有指定纵向排列，默认横向排列区块，也可能引发布局错乱

方案1：允许Timeline自适应内容高度（推荐，满足完整展示需求） #

直接修改app.scss的对应规则即可，调整后的完整代码如下：

.app {
    height: 100vh;

    .sections {
        width: 100%;
        min-height: calc(100vh - 70px); /* 固定高度改最小高度，适配所有区块的总内容高度 */
        // background-color: #1F1D36;
        position: relative;
        top: 70px;
        scroll-behavior: smooth;
        display: flex;
        flex-direction: column; /* 新增：指定区块纵向排列 */
        scroll-snap-type: y proximity; /* 强制捕捉改临近捕捉，避免切割长内容 */
        scrollbar-width: none; // for firefox
        &::-webkit-scrollbar{
            display: none;
        }

        > * {
            width: 100vw;
            min-height: calc(100vh - 70px); /* 固定高度改最小高度，内容少占满一屏，内容多自动撑开 */
            scroll-snap-align: start;
        }
    }
}

修改后所有区块会自动适配内容高度，Timeline内容再多也会自动撑开容器，不会溢出到Contact区块，同时保留滚动锚定的交互体验。

方案2：保持单屏滚动交互，Timeline内部滚动 #

如果你需要严格保留原来的每个区块刚好占满一屏的滚动逻辑，可以给Timeline组件单独加内部滚动规则，在Timeline对应的样式文件中添加：

// 把.timeline替换为你Timeline组件的根节点类名
.timeline {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
}

修改后Timeline内容超过高度时会在区块内部滚动，不会溢出到其他区块，也不会破坏原有全局滚动逻辑。

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