如何用JavaScript制作视口边缘顺时针滚动动画效果？

本文共计1076个文字，预计阅读时间需要5分钟。

原文：

要让一个元素在用户垂直滚动页面时，自动沿视口四周边缘做平滑、连续、无重置的顺时针循环运动（即：从左上角出发 → 向下走满视口高度 → 向右走满视口宽度 → 向上走满视口高度 → 向左走满视口宽度 → 回到起点并重复），关键在于放弃对 getBoundingClientRect() 实时坐标的条件判断（易受布局抖动、异步渲染、初始偏移干扰），转而采用以 scrollY 为统一时间轴的确定性数学建模。

核心思路是将整个运动抽象为一个「周期性路径」：

• 一圈总路程 = 2 ×（可用垂直距离 + 可用水平距离）
  其中：
  • 可用垂直距离 slackY = clientHeight − elementHeight（向下/向上可移动空间）
  • 可用水平距离 slackX = clientWidth − elementWidth（向右/向左可移动空间）
• 利用 scrollY % totalCycleLength 得到当前处于周期内的相对进度 position；
• 通过分段映射 + 镜像翻转（mirror 标志），将该进度无间断地映射到四条边上的 (x, y) 坐标。