应使用requestAnimationFrame节流绑定滚动监听器：设ticking标记，scroll回调中仅触发rAF，rAF内读取window.scrollY并更新UI，避免直接高频操作DOM；同时需添加{passive: true}提升移动端性能。
滚动监听器怎么绑定才不会卡顿
直接用 window.onscroll 或 addEventListener('scroll') 监听，大概率会触发过频、UI 卡顿。浏览器每秒可能派发上百次 scroll 事件，但你不需要每次都判断按钮显隐——只需要知道「是否已滑过阈值」即可。
推荐用 requestAnimationFrame 节流：
let ticking = false;
const threshold = 300; // 像素
const backBtn = document.getElementById('back-to-top');
function updateButtonVisibility() {
if (window.scrollY >= threshold) {
backBtn.classList.add('show');
} else {
backBtn.classList.remove('show');
}
}
function handleScroll() {
if (!ticking) {
requestAnimationFrame(() => {
updateButtonVisibility();
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', handleScroll);
- 不用
setTimeout或debounce库——requestAnimationFrame更贴合渲染周期，响应更顺 - 避免在
updateButtonVisibility中反复调用getBoundingClientRect()或查询 DOM ——这里只读window.scrollY，开销极小 - 如果页面有
position: fixed导航栏，阈值要加上其高度，否则按钮可能过早出现
按钮显示/隐藏的 CSS 动画怎么写才不闪
用 opacity + transform 配合 will-change，别用 display: none 切换——它会破坏动画连贯性，且触发重排。
#back-to-top {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
will-change: opacity, transform;
}
#back-to-top.show {
opacity: 1;
transform: translateY(0);
}
-
transition必须写在基础样式里（非.show中），否则首次显示无动画 - 加
will-change: opacity, transform能让浏览器提前为动画做图层提升，尤其在低端安卓 WebView 中明显减少闪烁 - 别用
visibility: hidden替代opacity: 0——它无法触发 transition，且仍占布局空间
点击返回顶部后按钮没及时隐藏怎么办
用户点按钮瞬间，页面开始滚动，但 scroll 事件还没触发，按钮还显示着，造成视觉残留。得手动同步状态。
立即学习“前端免费学习笔记（深入）”；
backBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
// 点击即刻隐藏，不等 scroll 事件
backBtn.classList.remove('show');
});
- 不能依赖滚动结束再隐藏——
scrollend事件兼容性差（Chrome 115+ 才稳定支持，Safari 未支持） - 如果用了第三方平滑滚动库（如
smooth-scroll），需在其回调里手动移除.show - 注意：若用户中途手动拖拽滚动条，按钮状态可能再次错位，所以监听逻辑仍要保留在 scroll 处理中
移动端 Safari 滚动监听失效的坑
iOS Safari 对 scroll 事件有特殊行为：惯性滚动停止前不持续触发，松手后才补发一次。这会导致按钮延迟出现甚至“跳一下”。
- 必须加
touchmove补监听：document.addEventListener('touchmove', handleScroll, { passive: true }) -
{ passive: true }是关键——不加的话 iOS 会禁用原生滚动优化，导致卡顿 - 不要在
touchmove里调用preventDefault()，否则页面无法滚动 - 部分老版 iOS（requestAnimationFrame 在 touchmove 中的支持不稳定，可降级为
setTimeout(..., 0)作为兜底
window.scrollY 值不受缩放影响，但用户感知的“滑过高度”是视觉高度。如果产品要求严格按可视区域比例触发（比如滑过 50% 屏幕才显示），就得改用 IntersectionObserver 监听一个占位元素，而不是硬编码像素阈值。 
