滚动到一定距离才显示悬浮条需用scroll事件监听+classList控制显隐，初始隐藏、滚动超阈值（如window.innerHeight*0.3）后添加show类触发动画，避免display切换和未节流导致的闪动与性能抖动。
滚动到一定距离才显示悬浮条，用 scroll 事件监听 + class 控制
直接让底部悬浮条一加载就 visible，和“滚动时自动弹出”是两回事。后者本质是：初始隐藏 → 滚动超过阈值 → 显示 → 继续滚动保持显示 → 回滚到顶部附近 → 隐藏。关键不在定位方式（position: fixed照旧），而在触发逻辑。
常见错误现象：display: none 切换导致重排闪动、监听 window.onscroll 不加节流造成性能抖动、阈值写死为 100 像素却忽略高 DPI 屏幕或缩放比例。
- 用
requestAnimationFrame包裹 scroll 处理函数，避免连续触发重绘 - 阈值建议用相对值，比如
window.innerHeight * 0.3，比固定像素更适应不同设备 - 显示/隐藏统一通过
classList.add('show')/classList.remove('show')控制，不要操作style.display - CSS 中定义
.bottom-bar { opacity: 0; transform: translateY(20px); transition: opacity 0.25s, transform 0.25s; } .bottom-bar.show { opacity: 1; transform: translateY(0); }
为什么不能只靠 CSS 的 :hover 或 :focus 实现滚动触发
:hover 依赖鼠标移入，:focus 依赖元素获得焦点——两者都和滚动行为无直接关联。试图用 body:hover .bottom-bar 或给 body 加 tabindex 再监听 focus，属于误用伪类，既不可靠也不符合语义。
真实场景中，用户可能用键盘滚动、触屏滑动、辅助设备导航，这些都不会触发 :hover；而 :focus 在无焦点元素的页面上根本不会生效。
立即学习“前端免费学习笔记（深入）”；
- 滚动检测必须依赖 JavaScript 的
scroll或scrollend（部分浏览器支持）事件 - 若需兼容旧版 iOS Safari，慎用
scrollend，优先 fallback 到setTimeout+scrollY差值判断 - 别在
scroll回调里直接调用getBoundingClientRect()，它会强制同步布局计算，拖慢滚动帧率
移动端滚动弹出时，如何避免被软键盘顶起或错位
iOS Safari 软键盘弹出时，window.innerHeight 会突变，导致原本计算好的滚动阈值失效，悬浮条可能提前显示、延迟隐藏，甚至卡在半空。这不是 bug，而是 viewport 缩放响应机制的一部分。
实操建议不是“阻止键盘影响”，而是“感知并隔离”。重点不是让悬浮条永远不动，而是让它在键盘活跃时不参与滚动判断。
- 监听
focusin事件，在input、textarea、contenteditable元素获焦时，临时禁用滚动监听器（removeEventListener） - 监听
blur后延时300ms再恢复监听，避免快速切换输入框导致状态混乱 - 不推荐用
window.visualViewport?.height做主判断依据——Android WebView 支持度差，且该值在键盘收起后存在延迟更新 - 若必须依赖高度变化，用
resize事件 +Math.abs(prevHeight - window.innerHeight) > 150作为键盘启停粗略信号
滚动弹出后，点击关闭按钮的状态要不要持久化
要。否则用户刚点掉悬浮条，一刷新又弹出来，体验断层。但持久化不是简单存个 localStorage.setItem('bottomBarClosed', 'true') 就完事。
容易被忽略的点在于：关闭状态是否应跨页面、是否设过期时间、是否在隐私模式下静默降级。
- 写入前先 try/catch localStorage，某些 iOS 隐私模式下会直接抛
QuotaExceededError - 加时间戳字段，比如
{ closedAt: Date.now(), expires: 86400000 }（24 小时），避免永久关闭 - 检查
document.referrer，如果来自站内其他页，可复用关闭状态；如果是新标签页打开，可重置 - 别在 DOMContentLoaded 时就读取并隐藏——得等滚动监听器挂载完成后再判断，否则可能因执行顺序问题漏掉首次滚动
滚动弹出看似只是加个 show/hide，真正复杂的是滚动阈值的鲁棒性、键盘与 viewport 变化的耦合处理、以及关闭状态在多上下文中的合理延续。DOM 操作本身很简单，难的是让这个“简单”在各种边界条件下依然成立。
