开启scroll snapping的中间滚动容器无法跳出，无法查看上下区域如何解决

• 你为.scrollcontainer设置了独立的overflow-y: scroll和100vh固定高度，相当于这个容器是一个独立的滚动上下文，滚动事件只会在容器内部生效，滚动到顶部/底部都不会触发外层页面的滚动
• scroll-snap-type: y mandatory是强制吸附规则，只要滚动行为还在该容器内部，就会强制吸附到最近的子section上，完全不会出现滚动溢出到外层页面的情况

把滚动吸附规则挂载到全局页面滚动上下文，适配你顶部、底部为普通滚动的需求：

1. 调整CSS代码如下：

/* 全局滚动容器开启吸附，用proximity而非mandatory，仅接近吸附点时触发吸附 */
html {
  scroll-snap-type: y proximity;
  overflow-y: scroll;
}
/* 移除原来.scrollcontainer上的overflow-y、height、scroll-snap-type三个属性 */
.scrollcontainer {
  /* 不需要额外的滚动相关属性 */
}

.scrollcontainer section {
  height: 100vh;
  scroll-snap-align: start;
}

2. 逻辑说明：

• scroll-snap-type: y proximity规则只会在滚动位置接近吸附点（也就是你中间的三个section）时才触发吸附效果
• 顶部、底部的普通区域没有设置scroll-snap-align规则，滚动到对应区域时不会触发吸附，会按照普通逻辑滚动
• 不需要修改原有HTML结构，也不需要额外JS逻辑，体验更流畅

如果必须保留中间容器的独立滚动逻辑，可以加少量JS监听滚动边界，手动把滚动事件透传给外层页面：

const scrollContainer = document.querySelector('.scrollcontainer')
scrollContainer.addEventListener('wheel', (e) => {
  const { scrollTop, scrollHeight, clientHeight } = scrollContainer
  // 滚动到顶部还在往上滚，透传给外层
  if (scrollTop === 0 && e.deltaY < 0) {
    e.preventDefault()
    window.scrollBy(0, e.deltaY)
  }
  // 滚动到底部还在往下滚，透传给外层
  if (scrollTop + clientHeight === scrollHeight && e.deltaY > 0) {
    e.preventDefault()
    window.scrollBy(0, e.deltaY)
  }
})

这个方案兼容性稍差，移动端触摸滚动需要额外适配，优先选第一种方案。

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