用 position: fixed + transform 实现滑动隐藏底部悬浮条：初始 bottom: 0，监听 scroll 记录最近两次 scrolly，仅当连续递减且方向由下向上切换时，加防抖触发 translatey(100%) 隐藏；向下滚动且已隐藏则还原为 translatey(0)。
用 position: fixed + transform 实现滑动隐藏
底部固定悬浮条（比如客服入口、下载提示）想在用户向上滚动时自动收起，核心不是靠“监听滚动方向”做复杂判断，而是用 CSS 的 transform: translateY() 配合 JS 记录滚动方向变化。关键在于：只在滚动方向由下向上切换的瞬间触发隐藏，避免反复抖动。
- 初始状态设为
bottom: 0，并加transition: transform 0.3s ease-out - 向上滚动且当前处于显示状态时，执行
element.style.transform = 'translateY(100%)' - 向下滚动且当前已隐藏时，还原为
transform: none或'translateY(0)' - 必须加防抖（如 50ms 内忽略重复触发），否则 iOS Safari 滚动会卡顿或误判
scroll 事件里怎么准确判断“向上滚动”
不能直接比对 window.scrollY 和上一次值——滚动惯性、触摸回弹、iOS 弹性滚动都会导致中间出现负向跳变。更稳的方式是记录最近两次 scroll 的 Y 值，只在连续两次递减时才认为是“向上滚动趋势”启动。
- 用两个变量：
lastScrollY存上次值，currentScrollY存本次值 - 仅当
currentScrollY 才触发隐藏 - 每次 scroll 更新
lastScrollY = currentScrollY，但不要在节流回调外更新 - 注意：首次滚动时
lastScrollY应初始化为window.scrollY，否则第一次向上滚动会被忽略
移动端 Safari 的 position: fixed 兼容性坑
iOS 15+ 上，fixed 元素在地址栏收起/展开时可能错位或闪动，单纯靠 transform 不够。必须配合 will-change: transform 强制 GPU 加速，并在滚动开始前临时加 top: 0 抑制重排。
- 隐藏时同时设置：
transform: translateY(100%)+will-change: transform - 显示时移除
will-change（长期开启会内存泄漏） - 在
touchstart事件里给 body 加style.overflow = 'hidden'可缓解 Safari 滚动卡顿，但需在touchend恢复 - 避免在
fixed条内使用height: 100vh，会导致 Safari 计算错误（应改用min-height: 60px等具体值）
要不要用 IntersectionObserver 替代 scroll 监听？
不推荐。IntersectionObserver 主要用于元素进出视口，而底部悬浮条的“隐藏时机”依赖滚动方向而非是否可见——用户快速向上滚过整个页面，条应该在滚动中就收起，而不是等它完全离开视口才动。用 IO 会有明显延迟，体验生硬。
- IO 的
isIntersecting === false只代表元素完全不可见，但用户可能刚向上滚了一点就停住，此时条还该显示 - scroll + 方向判断响应更快，实测首帧延迟
- 如果真要用 IO，得配合
rootMargin: '0px 0px -100% 0px'模拟“即将离开底部”，但兼容性和逻辑复杂度远超必要
will-change 清理，连续操作几次后悬浮条就可能卡死在半隐藏状态。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
