zepplu / zepplu.github.io Goto Github PK

https://zepplu.github.io/articles/usb-multiboot/

点击 TOC 中后三个链接时，滚动结束后高亮的项目不正确，需要手动往下滚几个像素。然而其它文章似乎没有此问题。

Microsoft edge 对 position: sticky 的支持似乎不完整，从下往上滚动，尤其是跳转时，有概率会出现跟丢的现象，即使不跟丢也有明显的滞后感。

https://github.com/abouolia/sticky-sidebar 似乎可以解决，应搭配 resizesensor 处理，应在被选 id 下单独挂一个 div 结点

• 检查引用的 jquery 插件，寻找替代品或者自己写一个
• 修改 setup.js

鉴于主流浏览器基本都支持了 ES6，语法上没必要纠结老的了

把 js 脚本都换成 cdn 源后，由于类名不一致，现在窗口宽度变小时导航栏不能自动折叠了。准备参考 https://github.com/lukejacksonn/GreedyNav ，写一个简单一点的实现：窗口变窄时直接把全部入口收纳进汉堡菜单，不再一个个来了。

修改目录 /_sass/，可能有用的 repo 内搜索关键词：

• mfp，jquery 扩展 manific-popup 的
• social-icons，多半用不上
• highlight，不知道是啥，待研究
• 字体 family 列表，目前的太长了，需要在不同平台不同浏览器上测试一下，挑出最有用的

https://sh.alynx.one/posts/Frontend-Blog-Search/

奇怪之处在于：只有目录里的链接无效了，正文里 heading 前的链接却有效。用 chrome devtools debug 后发现问题出在 webpack://[name]/./node_modules/smoothscroll/smoothscroll.js（这个是啥？），里面有这样的代码：

    var linkHandler = function linkHandler(ev) {
        if (!ev.defaultPrevented) {
            ev.preventDefault();
            if (location.hash !== this.hash)
                window.history.pushState(null, null, this.hash);
            var node = document.getElementById(this.hash.substring(1));
            if (!node)
                return;
            smoothScroll(node, 500, function (el) {
                location.replace('#' + el.id);
            });
        }
    };
    document.addEventListener('DOMContentLoaded', function () {
        var internal = document.querySelectorAll('a[href^="#"]:not([href="#"])'), a;
        for (var i = internal.length; a = internal[--i];) {
            a.addEventListener('click', linkHandler, false);
        }
    });

this.hash（这个又是啥？）出来的是经过了 url encode 的字符，用它来跳转的话自然会失败。所有 hashtag 链接都被加上了这个 listener，但正文里的链接是在 setup.js 尾部动态生成的，所以免于遭难。

既然咱们没法改这个 smoothscroll.js，那可以自己把 event listener 给去掉。但是 removeEventListener() 需要传入与 addEventListener() 相同的参数，显然办不到。SO 上的老哥给出了一个简单粗暴的解决方法：直接复制一个新的 DOM 结点，把原来的替换掉。