fix: 双栏非对称吸底滚动与对齐

- 去掉首页侧栏额外 padding，左右两栏初始顶部对齐 - 隐藏 #page-scroll 滚动条 - 左侧到底后用 translateY 补偿吸附在视口底部，右侧继续滚动；右侧先到底时两栏同步 - ResizeObserver 重算吸附阈值 - 验证：初始 top 148/148；滚动后左栏 top 144 固定、bottom 900；无滚动条
2026-10-31 15:51:57 +08:00
parent 54fd0edf84
commit 4304fd75b4
4 changed files with 46 additions and 2 deletions
@@ -147,6 +147,14 @@ DELETE /api/items/:id

 ## 11. 实施记录

+### P20（2026-10-31，双栏非对称吸底滚动）
+
+- 两栏顶部对齐：去掉首页侧栏额外的 `padding-top`，两栏都从 `#page-scroll` 顶部（y=148）开始；
+- 隐藏滚动条：`#page-scroll` 使用 `scrollbar-width: none` / `::-webkit-scrollbar { display:none }`；
+- 非对称吸底：仍共用一个滚动容器；滚动时用 `translateY(max(0, scrollTop - (侧栏高度 - 视口高度)))` 补偿左栏，左侧内容到底后吸附在视口底部，右侧继续滚动；
+- 右侧先到底、左侧更长时不补偿，两栏同步滚到整体底部；`ResizeObserver` 在内容变化时重算；
+- 验证：初始左右 top 均为 148；滚动 120/300/600 时左侧 top 稳定在 144、bottom 贴住 900，右侧正常滚动；页面无滚动条。
+
 ### P19（2026-10-31，左右两栏共用滚动容器）

 - 不再用 `sider.scrollTop = content.scrollTop` 模拟同步：把 Layout 的 body（`#page-scroll`）设为滚动容器，`margin-top: 88px`、高度 `calc(100% - 88px)`，左右两栏都在这个容器里；