悬浮球吸附边缘需用transform动态偏移+transition缓动，JS判断鼠标靠近哪边并添加对应class，CSS通过class控制translate目标值，须结合球体尺寸与吸附阈值计算球心位置，避免悬空。
hover时球体吸附边缘的CSS实现原理
悬浮球吸附到屏幕边缘，本质是用 transform 动态偏移位置，配合 transition 实现缓动。不是靠 position: fixed 硬定位再改 left/top，那样会打断过渡；必须让位移完全由 transform: translate() 承担，浏览器才能硬件加速且平滑插值。
关键点在于：触发吸附的时机要靠 JS 判断鼠标靠近哪条边，再给元素加对应 class，CSS 里用 class 控制 transform 的目标值。纯 CSS 无法获知鼠标相对视口的位置，所以 JS 不可省略。
监听鼠标位置并判断吸附方向的JS逻辑
不能只看 clientX 或 clientY 绝对值，得结合球体尺寸和预设吸附距离（比如 20px）做边界计算。常见错误是忽略球心坐标，直接拿鼠标位置比对，导致球体“悬空半截”贴边。
- 用
getBoundingClientRect()拿球当前位置，算出球心坐标 - 吸附阈值建议设为
20～40px，太小难触发，太大显得拖沓 - 优先级顺序很重要：比如鼠标同时靠近右和下，按“离哪边更近”决定，而不是固定按上下左右顺序判断
- 离开边缘后要清除 class，否则球会卡在吸附位置不动
示例判断右边缘逻辑：
if (window.innerWidth - clientX < threshold && Math.abs(clientY - centerY) < threshold * 1.5) {——这里放宽垂直范围，避免因鼠标小幅上下晃动导致吸附失效。
立即学习“前端免费学习笔记（深入）”；
transition 和 transform 配合的坑
最容易踩的是把 transition 写在初始样式里，但没给初始 transform 值（比如默认是 none），导致第一次吸附没动画。必须确保元素始终有可过渡的 transform 基础值。
- 初始状态写
transform: translate(0, 0);，哪怕它看起来没作用 -
transition只写transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)，别加all，否则可能意外过渡其他属性 - 吸附 class 里只改
transform，例如.snap-right { transform: translate(calc(100vw - 60px), 0); }，其中60px是球宽 + 边距 - 别用
%做吸附位移，视口变化时会跳变；用vw/vh或px更稳
移动端适配和性能敏感点
触摸设备没有 hover，也不能依赖 mousemove——手指移动不连续，而且 touchmove 触发太频繁，不做节流会卡顿。吸附行为在手机上其实体验较差，建议用媒体查询关掉：
@media (hover: none) and (pointer: coarse) { .floating-ball { transition: none; } }
- PC 端用
requestAnimationFrame包裹位置计算，避免 layout thrashing - 吸附过程中禁用
pointer-events可能导致点击穿透，别乱加 - 球体层级必须设
z-index，尤其页面有 sticky header 时，否则会被盖住
吸附不是越灵敏越好，留一点“迟滞感”反而更可控。真正难调的是多方向切换时的过渡衔接，比如从右边缘快速移到下边缘，中间容易抽搐——这时候得用 JS 记录上一次吸附方向，加个短暂锁定期，或者改用 will-change: transform 提前告知浏览器。
