触发方式
点击目录或用方向键、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 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明,并保留随源码附带的第三方与字体许可;完整网页编辑器由独立工程维护。
用于自己的项目
进入编辑器运行真实预览并比较调整;本说明页不另造一份近似演示。把导出用于自己的项目后,重新检查内容、输入、焦点与布局。
目录来源标注:原创实现. 第三方示例保留自己的许可与署名;公开仓库包含全部当前动效的渲染源码;完整编辑器由独立工程维护。