滚动区块吸附异常：outer类干扰导航栏与首屏元素

• 滚动容器的定位冲突
  检查outer类是否设置了overflow: scroll/overflow-y: auto。如果首屏的导航栏、标题用了fixed/sticky定位，滚动容器的overflow会让固定元素相对于outer而非视口定位，导致导航无法正常悬浮、标题按钮位置偏移。比如position: fixed的导航会被局限在outer容器内部，无法显示在页面顶部。

• 层级与覆盖问题
  查看outer类的z-index值，若层级过高会直接覆盖首屏的标题、按钮，导致元素被遮挡无法交互或显示。同时检查page类的scroll-snap-align属性，是否强制首屏对齐到滚动容器的特定位置，挤压了标题和按钮的布局空间。

• 显示逻辑的滚动事件源错误
  如果标题、按钮的显示逻辑（比如滚动后隐藏）是基于window的滚动状态判断，而outer作为独立滚动容器，实际滚动事件发生在outer元素上而非全局窗口。此时未修改事件监听对象的话，会导致显示逻辑失效——本该只在首屏显示的元素可能滚动后仍显示，或者提前被隐藏。

• 容器高度设置异常
  检查outer类的高度配置，比如height: 100vh或min-height: 100%。如果首屏元素在outer外部，可能被outer的高度挤压；若page类也设置了height: 100vh，两者叠加会导致首屏元素被推到视口外，出现显示异常。

• 导航交互的事件阻断
  若导航栏的交互（如跳转、下拉菜单）依赖全局滚动或视口位置，outer作为独立滚动容器会让这些事件无法正确触发。比如点击导航跳转时，滚动的是outer而非整个页面，导致导航跳转功能失效。

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