移动端浏览器导航栏切换时Scroll Snap功能异常问题求助

问题根源 #

1. 将scroll-snap-type绑定在html元素上，浏览器导航栏的展开/收起会直接改变html的有效滚动视口高度，导致滚动吸附的锚点位置计算失效。
2. container使用了position: sticky，这一属性会干扰滚动容器的布局计算，在视口高度变化时进一步加剧吸附错位的问题。
3. 滚动容器与吸附元素的层级关系不合理，导致视口变化后无法重新计算吸附位置。

修复方案 #

1. 调整滚动容器层级

将滚动容器从html改为main，让main成为独立的滚动上下文，避免浏览器全局视口变化的影响。

2. 移除冲突属性

删除container的position: sticky属性，全屏滚动场景下该属性无必要，且会与scroll-snap的布局逻辑冲突。

3. 修正容器样式

给main设置固定高度和滚动属性，确保其内部的scroll-snap能正确计算锚点位置。

修复后的代码 #

CSS

html {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0;
}
main {
  max-width: 390px;
  margin: auto;
  height: 100lvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.container {
  margin: auto;
  border-radius: 15px;
  height: 100lvh;
  max-width: 390px;
  width: 100%;
  font-size: 48px;
  scroll-snap-align: start;
}
.container:nth-child(1) { background-color: red; }
.container:nth-child(2) { background-color: blue; }
.container:nth-child(3) { background-color: bisque; }
.container:nth-child(4) { background-color: rgb(0, 255, 0); }
.container:nth-child(5) { background-color: rgb(0, 255, 242); }

HTML

<main>
    <div class="container">1</div>
    <div class="container">2</div>
    <div class="container">3</div>
    <div class="container">4</div>
    <div class="container">5</div>
</main>

额外优化建议 #

• 监听resize事件，在视口高度变化时手动触发滚动容器的重新布局（可选，大部分场景下上述修复已足够）：

window.addEventListener('resize', () => {
  document.querySelector('main').scrollTop = document.querySelector('main').scrollTop;
});

这行代码通过轻微改变滚动位置，强制浏览器重新计算scroll-snap的锚点位置，进一步避免极端场景下的错位。

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