设置overflow-y后100vw导航栏与滚动条重叠且滚动吸附效果异常问题

问题根源 #

你当前的实现存在两个核心布局逻辑冲突：

1. 你给.content设置了100vh高度+独立的overflow-y: scroll属性，等于滚动条是.content容器自身的，会贯穿整个视口高度；而导航栏是fixed固定在全局视口顶部，宽度100%，自然会和右侧滚动条的顶部区域重叠。
2. 固定定位的导航栏会脱离正常文档流，父容器.header高度为0，.content默认会从视口最顶部开始渲染，就算给子元素加了padding-top，滚动时依然会出现内容偏移的问题。

修复方案 #

只需要修改3处CSS即可，保留滚动吸附效果的同时解决重叠和遮挡问题：

1. 修改App.css，禁用全局滚动，调整.content的位置和高度：

*{
  font-family: 'Nunito Sans', sans-serif;
}
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 禁用全局滚动，仅保留content区域的滚动 */
}
div{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.header{
  display: block;
}
.content{
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: calc(100vh - 8vh); /* 高度减去导航栏的8vh，滚动条仅在导航下方显示 */
  margin-top: 8vh; /* 把content整体下移导航栏高度，避免内容被导航遮挡 */
}

2. 修改Navbar.css，增加层级和显式顶部定位，防止内容覆盖导航：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.navbar{
    background-color: #343434;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    top: 0; /* 显式指定顶部对齐，避免浏览器默认偏移 */
    z-index: 999; /* 保证导航层级最高，不被滚动内容覆盖 */
    width: 100%;
    min-height: 8vh;
}

3. 修改Body.css，调整section高度匹配content高度，保证滚动吸附精度：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    color: white;
    height: calc(100vh - 8vh); /* 高度和content保持一致，不需要额外加padding-top */
}
.one{
    background-color: rgb(36,164,138);
}
.two{
    background-color: rgb(211,79,79);
}
.three{
    background-color: rgb(67,91,175);
}
.four{
    background-color: lightsalmon;
}
.five{
    background-color: lightskyblue;
}

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