触发方式

点击目录或用方向键、Home / End 切换章节。单独预览时,滚轮沿目录移动;开启联动阅读预览后,滚动阅读区同步目录,点击条目滚动到对应标题。

起点与终点

目录标题「On this page」,共 8 项,预览章节「Installation」。Installation / ›Prerequisites / ›Installation Steps / ›Configuration / Usage / ›Customizing Content / ››Submenu Content / Features。层级缩进 14px,行距 32px,字号 14px,纸飞机 16px。

时序

跟随响应基准 520 ms,解析临界阻尼弹簧保留当前位置与速度;转向响应最多 300 ms。反向目标累计超过 2px 才掉头,防止微小滚动抖动反复转向。

进入与退出

纸飞机沿实测目录行中心生成的折线移动,转弯时随切线调整角度;经过部分为实线、未经过部分为虚线,已读节点填实。阅读锚点偏移 96px;联动阅读 false;强调色 #333333,配色 light。

重复操作与打断

快速切换从当前位置接续。点击锁定目标章节,下一次真实滚轮、触屏或滚动按键操作后恢复阅读跟踪;接近文末时仍能定位最后一章。暂停、后台和隐藏预览冻结移动、转向、演示与程序滚动,继续后接续。右侧条目与层级立即更新目录和阅读标题;点击项、阅读位置、焦点和观察倍速不保存到 JSON。

减少动态效果

纸飞机与阅读位置直接到位,关闭自动往返演示;点击、键盘、真实滚动和节点状态仍可使用。

默认配置

这些数值来自当前维护的默认配置;编辑器草稿和调整后的导出可以不同。

{
  "schemaVersion": 2,
  "recipeId": "rail-toc",
  "durationMs": 520,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "railToc": {
    "title": "On this page",
    "items": [
      {
        "id": "installation",
        "label": "Installation",
        "depth": 0,
        "body": "Start with a clear path. The contents list keeps every section within reach."
      },
      {
        "id": "prerequisites",
        "label": "Prerequisites",
        "depth": 1,
        "body": "Gather the essentials before you begin. Related sections sit one step inside their parent."
      },
      {
        "id": "installation-steps",
        "label": "Installation Steps",
        "depth": 1,
        "body": "Take one step at a time. Select a heading to jump directly to its place in the article."
      },
      {
        "id": "configuration",
        "label": "Configuration",
        "depth": 1,
        "body": "Choose the spacing and reading position that suit your page."
      },
      {
        "id": "usage",
        "label": "Usage",
        "depth": 0,
        "body": "Read at your own pace. The paper plane follows your progress along the rail."
      },
      {
        "id": "customizing-content",
        "label": "Customizing Content",
        "depth": 1,
        "body": "Give each section a useful name. Short, concrete labels make a long page easier to explore."
      },
      {
        "id": "submenu-content",
        "label": "Submenu Content",
        "depth": 2,
        "body": "Use a deeper level for details that belong together. The rail bends to reflect the hierarchy."
      },
      {
        "id": "features",
        "label": "Features",
        "depth": 0,
        "body": "Return to any section whenever you need it. Scrolling upward turns the plane around."
      }
    ],
    "initialIndex": 0,
    "indent": 14,
    "rowHeight": 32,
    "fontSize": 14,
    "offset": 96,
    "planeSize": 16,
    "accentColor": "#333333",
    "theme": "light",
    "showContent": false
  }
}

源码与复用

GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明,并保留随源码附带的第三方与字体许可;完整网页编辑器由独立工程维护。

用于自己的项目

进入编辑器运行真实预览并比较调整;本说明页不另造一份近似演示。把导出用于自己的项目后,重新检查内容、输入、焦点与布局。

目录来源标注:原创实现. 第三方示例保留自己的许可与署名;公开仓库包含全部当前动效的渲染源码;完整编辑器由独立工程维护。