长文目录比视口高出一截 滚到第二节下面几项就看不见

.toc {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

文章有四十多个小标题，目录总高一千二百像素，往下滚到第二节，目录底部已经超出屏幕，后面十几项怎么都滚不到。这类现象通常不是突然出现的，往前翻半天日志能看到苗头。

追下去是这么回事：sticky 只是让元素停在指定位置，元素本身比视口高时，超出的部分仍然在屏幕外，页面滚动不会带动它内部滚动。目录没有自己的滚动条，底部条目就永远看不到。

「长目录吸顶」改完先别急着全量，挑一台机器放半天，真有问题这段时间就能看出来。同类问题如果隔一段时间又出现，多半是某个定时任务或重启流程把改动冲掉了。

把这次用到的命令存进笔记，比记住结论有用，换个环境还能照着走。

处理上按这个顺序：给目录设 max-height，用 calc(100vh - 固定头高度 - 间距) 算；加 overflow-y: auto，目录自己滚，页面滚到哪它都停得住；滚动条做细一点，别占掉正文宽度，触屏上也要能滑。

确认没问题再收工，滚到文章中部，目录停在固定头下面，内部可以单独滚动，最后一项也能点到。