scss 无法激活滚动吸附，关键在于运行时 css 约束：滚动容器需 overflow-y: scroll、height: 100vh、scroll-snap-type: y mandatory；子项须逐个声明 scroll-snap-align: start，并配合 flex-shrink: 0 和 touch-action: pan-y。
直接在 SCSS 里写 scroll-snap-type 和 scroll-snap-align 没问题，但光套个 @mixin 或变量不会让滚动“活起来”——关键约束全在 CSS 运行时行为，SCSS 只是提前生成它。
滚动容器必须显式启用可滚动上下文
SCSS 不能绕过浏览器对滚动容器的硬性要求。哪怕你用 @each 动态生成类名，最终编译出的 CSS 仍需满足：
-
overflow-y: scroll（不是auto或hidden），iOS Safari 要求必须明确写overflow-y -
height: 100vh（不能是min-height，也不能靠内容撑开） -
scroll-snap-type: y mandatory必须写在该容器上，不能写在body或html - 避免父层有
transform、filter、position: fixed，这些会切断 scroll snap 捕获链
子项 scroll-snap-align 必须逐个声明
SCSS 的 @mixin 可以复用样式，但 scroll-snap-align 是每个子项“主动申报停靠位置”的行为，不声明等于没通电：
- 垂直全屏滚动统一用
scroll-snap-align: start，比center更稳，兼容性更好 - 别试图用
.slide:nth-child(n)批量覆盖——每个<section></section>都得单独加该声明 - 配合
flex: 0 0 100vh+flex-shrink: 0，比height: 100vh更抗滚动条占位和缩放干扰 - 禁用
margin-bottom分隔幻灯片，改用padding-bottom或负外边距抵消
移动端必须显式放开 touch-action
SCSS 编译不出运行时逻辑，但你可以把移动端必需的声明固化进 mixin：
- 纵向滚动容器加
touch-action: pan-y，横向轮播用touch-action: pan-x - 不要写
pan-y pinch-zoom多值组合，部分 WebView 会因此卡顿或干扰双指缩放 -
-webkit-overflow-scrolling: touch已废弃，现代 iOS 不仅不需要，留着还可能冲突，建议从 SCSS 中彻底删掉 - 真机测试时连 Safari Web Inspector，看 Timeline 是否触发
ScrollStart/ScrollEnd，而不是只靠视觉判断
JS 控制切换时别手动算像素偏移
SCSS 无法干预 JS 行为，但你可以在配套脚本里避开常见坑：
- 别直接赋值
container.scrollTop = x—— 高 DPI 屏、缩放页面或 Safari 下极易失步 - 改用
slideEl.scrollIntoView({ block: 'start', behavior: 'smooth' })，它会尊重当前scroll-snap配置 - 监听
scrollend（Chrome 112+、Safari 16.4+ 支持）做状态同步；旧版降级用IntersectionObserver，rootMargin设为'0px 0px -50% 0px' - 避免在
scroll事件回调里调scrollTo或改 DOM，容易引发循环滚动
最常被忽略的是：SCSS 编译再漂亮，如果最终 HTML 结构里滚动容器没高度、没 overflow-y、子项漏了 scroll-snap-align，或者移动端忘了 touch-action，那整个 scroll snap 就是死的——它不报错，只是沉默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
