AberSheeran
Aber Sheeran
I know nothing except the fact of my ignorance.

更好看的滚动条

起笔自
所属文集: 杂记
共计 952 个字符
落笔于

浏览器自带的滚动条相当丑,我在一段时间之前魔改了一下perfect-scrollbar的CSS代码,做了一个更好看的滚动条,我现在的博客代码块用的就是它。

效果图

使用方法

先引入JS与CSS:

<script src="https://abersheeran.com/templates/static/components/prefect-scrollbar/main.min.js"></script>
<link rel="stylesheet" href="https://abersheeran.com/templates/static/components/prefect-scrollbar/style.css" />

接着在每个可能会出现滚动条的元素加上class="ps"

最后使用如下JS代码调用渲染逻辑:

<script>
    (function () {
        var ps_list = [];
        (function setScrollbarStyle() {
            var elements = document.getElementsByTagName("ps");
            for (var i = 0; i < elements.length; i++) {
                ps_list.push(new PerfectScrollbar(elements[i]));
            }
        })();
        window.addEventListener("resize", function () {
            for (var i = 0; i < ps_list.length; i++) {
                ps_list[i].update();
            }
        });
    })();
</script>
如果你觉得本文值得,不妨赏杯茶
漂亮的 Windows Terminal
没有下一篇