重构Backstage Talks网站时scroll snap滚动吸附功能失效问题排查

要给重构的网页添加垂直滚动吸附功能，实现用户滚动时最近的杂志封面自动垂直居中于页面，但当前代码未产生预期的滚动吸附效果。

问题根源 #

1. 滚动容器无固定高度：.scroll-container未设置高度，默认仅包裹内容高度，无法形成可滚动区域，触发不了滚动吸附。
2. 吸附对齐方式错误：使用scroll-snap-align: start会让元素顶部对齐滚动容器，而非垂直居中。
3. 根元素高度未初始化：html和body未设置高度，导致滚动容器无法正确继承视口高度。

修改后的完整CSS代码 #

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
    font-family: 'Roboto', sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    background-color: #ff608c;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
}

.logo {
    position: fixed;
    top: 20px;
    left: 15px;
    width: 260px;
    height: auto;
    z-index: 10;
}

.mail {
    position: fixed;
    right: 15px;
    top: 23px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    color: black;
    z-index: 10;
}

.description {
    position: fixed;
    width: 325px;
    bottom: 65px;
    left: 15px;
    font-weight: bold;
    font-size: 18px;
    line-height: 25px;
    z-index: 10;
}

.copyright {
    font-size: 12px;
    font-weight: normal;
}

.copyright a {
    color: black;
}

.privacy {
    position: fixed;
    padding-top: 20px;
    font-weight: bold;
    font-size: 18px;
    color: black;
}

.issues {
    position: fixed;
    right: 15px;
    bottom: 20px;
    list-style-type: none;
    font-size: 18px;
    line-height: 1.6;
    z-index: 10;
}

.issues a {
    color: black;
    text-decoration: none;
}

.issue_six img, .issue_five img{
    width: 420px;
    padding-top: 20px;
}

.issue_five {
    padding-top: 100px;
    padding-bottom: 100px;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.centered {
    text-align: center;
    font-weight: bold;
    font-family: 'Roboto';
}

.buy {
    font-size: 15px;
    line-height: 22px;
    padding-top: 25px;
    padding-bottom: 20px;
}

.buy-here {
    color: white;
}

.scroll-container {
    display: flex;
    flex-direction: column;
    scroll-snap-type: y mandatory; 
    overflow-y: scroll;
    scroll-behavior: smooth;
    height: 100vh;
    width: 100%;
}

.issue_six, .issue_five {
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

核心修改说明 #

• 初始化html和body高度为100%，隐藏body滚动条，让滚动仅在.scroll-container内生效。
• 给.scroll-container设置height: 100vh，创建占满视口的可滚动区域。
• 将scroll-snap-align改为center，实现杂志项垂直居中吸附。
• 为每个杂志项设置min-height: 100vh并通过flex布局居中内容，确保项占满视口高度，滚动时自动居中。
• 给固定元素添加z-index: 10，避免被滚动内容遮挡。

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