尝试解决blog模板的滚动条bug

问题现状

在上传了上一次的fakebook博文后，我浏览了该页面，然后发现滚动条到达底部后，文章内容未显示完全，且没有底部的其他信息。（如图）

随后，我登录github该主题的issue模块查阅有没有解决办法，发现了2019年有人出现类似问题，并提出“能否把进度条设置长一些”的建议，但一直未能得到解答。

于是，决定自力更生，审计一下项目源码。

解决过程

我在js文件夹中发现了scroll.js文件，其中有一些可疑的代码段,

这个应该对应的是头像下面的进度条。

// 进度条君的长度
updateProgress(scrollTop, articleTop, articleHeight)
findHeadPosition(scrollTop)

跟进到updateProgress和findHeadPosition函数

function updateProgress(scrollTop, beginY, contentHeight) {
    let windowHeight = $(window).height()
    let readPercent
    if (scrollTop < introHeight) {
      readPercent = 0
    } else {
      readPercent = (scrollTop - beginY) / (contentHeight - windowHeight) * 100
    }
    readPercent = readPercent >= 100 ? 100 : readPercent
    $progressBar[0].style.width = `${readPercent}%`
  }

function findHeadPosition(scrollTop) {
    if (isPostPage) {
      let list = $('#post').find('h1,h2,h3,h4,h5,h6'),
        currentId = ''
      list.each(function () {
        let head = $(this)
        if (head.offset().top < scrollTop) {
          currentId = '#' + head.attr('id')
        }
      })
      let currentToc = $('.toc-link.active')
      if (currentId && currentToc.attr('href') !== currentId) {
        $('.toc-link').removeClass('active')
        let _this = $('.toc-link[href="' + currentId + '"]')
        _this.addClass('active')
        _this.parents('.toc-child').siblings('.toc-link').addClass('active')
      }
    }

$(document).scrollTop() 获取垂直滚动的距离:当前滚动的地方的窗口顶端到整个页面顶端的距离

scrollTop()==0的时候即顶端

$(document).scrollTop()>=(document).height()−(window).height()即底端

逻辑上代码没有问题，那问题就出现在形参contentHeight上，也就是articleHeight这个实参上。

这个参数来源于：

if ($('#post').length) {
    isPostPage = true
    articleTop = introHeight
    articleHeight = $('.article-entry').outerHeight()
  }

查了一下article标签的位置：

发现没有任何问题。

这个时候，我翻看了一下原md文档，发现写了这样的语句：

本意是用引用格式加载文本信息，但是其中的<frame>标签被解析了，因此导致后面的部分无法加载，小丑竟是我自己。- -

好嘛，虽然中间绕了很多弯路，但是通过这两天对cxo主题源码的审计，我居然能看懂一点css和js了，还是很划算的。

参考

https://www.cnblogs.com/wang715100018066/p/6755729.html