“跟随滚动”不能靠 scroll-behavior 实现，因其仅控制锚点跳转的平滑动画，不支持元素粘附视口；需用 position: fixed + 滚动监听，并处理 z-index、iOS 安全区、横向滚动对齐及动态显隐的节流与兼容性问题。
为什么“跟随滚动”不能靠 scroll-behavior 实现
scroll-behavior: smooth 只控制**滚动行为本身**（比如跳转到锚点时是否平滑），它不负责让某个元素“粘在视口里跟着动”。想让加入购物车按钮始终可见，得用定位 + 滚动监听，不是滚动动画配置。
固定定位 + 安全区适配才是正解
最常用且可靠的方式是 position: fixed，但必须处理几个关键细节：
- 按钮要加
z-index（建议 ≥ 100），否则可能被弹窗、导航栏盖住 - 避开 iOS 安全区：用
bottom: env(safe-area-inset-bottom)替代固定bottom: 20px - 横向滚动页面时，
fixed元素会随 viewport 移动，若按钮需始终对齐右侧，得配合right: max(20px, env(safe-area-inset-right)) - 别用
position: sticky试图“粘”在某个容器底部——它依赖父容器滚动，而页面主滚动容器是html，sticky 在 body 内表现不可控
滚动中动态显隐按钮的坑
如果按钮只在滚动到商品区域才出现，常见失效点有：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 监听
scroll事件但没加{ passive: true }，iOS Safari 会静默禁用，导致按钮卡死不显示 - 用
window.scrollY判断位置，但在某些安卓 WebView 或缩放页面下不准，应改用document.documentElement.scrollTop - 目标商品 DOM 是懒加载或 Vue/React 动态渲染的，监听 scroll 时元素还没挂载，
getBoundingClientRect()返回top: 0，判断永远失败 - 没做节流，快速滚动触发上百次计算，UI 线程卡顿，按钮闪烁或延迟响应
真·平滑的交互反馈不是滚动本身
用户点击“加入购物车”后，如果只是让按钮自己动，体验很单薄。真正需要平滑的是后续动作：
立即学习“前端免费学习笔记（深入）”；
- 按钮点击后，用
element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })把商品卡片轻微上推，避免被键盘或底部工具栏遮挡 - 若页面有固定头部（如 64px 高），记得在
scrollIntoView里加偏移：{ behavior: 'smooth', block: 'start', inline: 'nearest' }，再手动调整scrollBy(0, -64) - 不要在
touchmove中调用任何scrollTo或scrollIntoView—— 会打断原生滚动惯性，iOS 上直接卡住
最容易被忽略的不是“怎么让它动”，而是“动完之后用户下一步在哪”：按钮固定后，如果商品价格或库存变了，得同步更新按钮文案和状态，否则平滑滚动反而放大了信息不同步感。
