我发现我总是需要解决一个问题之前，先解决若干个前置问题，差不多花了八个小时左右…解决了超长 toc 的滚动问题。

#写在前面

不愿意往下看的可以直接在/source/js/src/even.js里的Even.prototype.scrollToc替换如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
Even.prototype.scrollToc = function () {
  var SPACING = 20;
  var $toc = $(".post-toc");
  var $footer = $(".post-footer");

  if ($toc.length) {
    var minScrollTop = $toc.offset().top - SPACING;
    $(window).scroll(function () {
      var tocState = {
        start: {
          position: "absolute",
          top: minScrollTop,
        },
        process: {
          position: "fixed",
          top: SPACING,
        },
      };
      var scrollTop = $(window).scrollTop();
      if (scrollTop < minScrollTop) {
        $toc.css(tocState.start);
      } else {
        $toc.css(tocState.process);

        if (
          $(".toc-link.active").offset() != undefined &&
          $(".toc-link.active").offset().top -
            document.documentElement.scrollTop >
            (window.innerHeight * 1) / 2
        ) {
          $(".post-toc").offset({
            top: Math.min(
              $footer.offset().top - $toc.height() - SPACING,
              (window.innerHeight * 1) / 2 +
                document.documentElement.scrollTop -
                ($(".toc-link.active").offset().top -
                  $(".post-toc").offset().top)
            ),
          });
        }
        if (
          $footer.offset().top <
          $(".post-toc").offset().top + $toc.height() + SPACING
        ) {
          $(".post-toc").offset({
            top: $footer.offset().top - $toc.height() - SPACING,
          });
        }
      }
    });
  }
};

具体效果可以去Sync Sofa里看，个人认为是最优解决方案。

#问题

在这个主题的toc超出浏览器页面高度之后，会没办法显示所有的目录信息，导致阅读障碍。

个人认为比较可行的方案有三个：

  1. 折叠子标题
  2. 目录支持滚轮
  3. 目录跟随文档一起滚动

先说第一个方法，也是我看这个主题的issue时里面提到的，效果可以去看Theme preview，我个人认为不是一个很好的解决方案，因为如果极端情况下，所有的标题都是同一级的，那势必没办法进行子标题折叠，此方案 pass。（亏我还花了 1 个小时时间来研究怎么迁移过来。）

第二个方法，我个人觉得有点蠢，且不说目录本身就是浮动的，不好滚，就算是滚起来了，翻一会页的时候还要再翻目录页。。。想想就有点不合适，留给有缘人尝试吧。

#怎么滚

六七个小时断断续续的解决方案我也不在这瞎 BB 了，直接上核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (
  $(".toc-link.active").offset() != undefined &&
  $(".toc-link.active").offset().top - document.documentElement.scrollTop >
    (window.innerHeight * 1) / 2
) {
  $(".post-toc").offset({
    top: Math.min(
      $footer.offset().top - $toc.height() - SPACING,
      (window.innerHeight * 1) / 2 +
        document.documentElement.scrollTop -
        ($(".toc-link.active").offset().top - $(".post-toc").offset().top)
    ),
  });
}

逻辑就是，如果当前正在访问的目录在屏幕的 1/2 处往下了，那么我么就往上滑目录，使得当前正在访问的标题始终处于文档的正中心。