掘金文章目录高度优化

掘金网站文章的目录，展示的高度太小，现予以增加
换行
// ==UserScript==
// @name         掘金文章目录高度优化
// @namespace    http://tampermonkey.net/
// @version      1.0.4
// @description  掘金网站文章的目录，展示的高度太小，现予以增加
// @author       interest2
// @match        https://juejin.cn/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=juejin.cn
// @grant         GM_addStyle
// @license       GPL-3.0-only
// ==/UserScript==

(function() {
    'use strict';
    console.log("my script start");

    // 定义CSS变量
    const CSS_VARS = {
        toolTable: `
            position: fixed;
            top: 80px;
            z-index: 999;
        `,
        sidebar: `
            position: absolute;
            z-index: 999;
        `
    };

    // 缓存DOM元素
    const DOM = {
        main: document.querySelector("#juejin > div:nth-child(1) > div > main > div"),
        article: document.querySelector("#juejin > div:nth-child(1) > div > main > div > div.main-area.article-area"),
        side: document.querySelector("#sidebar-container"),
        table: document.querySelector("#sidebar-container > div:nth-child(2) > nav"),
        content: document.querySelector("#sidebar-container > div:nth-child(2) > nav > div.catalog-body.unfold")
    };

    let ht = window.innerHeight - 100 + "px";
    console.log(ht);

    // adjust();
    setTimeout(adjust, 1000);

    function adjust(){
        // 将文章主体往右挪
        DOM.main.style.left = "100px";
        DOM.side.style.cssText = CSS_VARS.sidebar;

        // 将侧边栏往右挪
        let sideLeft = DOM.side.clientWidth + 100;
        DOM.side.style.left = "-" + sideLeft + "px";

        // 测量文章主体的右边缘，加个几十px的空隙，就是目录的左边缘
        let articleRight = DOM.article.getBoundingClientRect().right;
        let tableLeft = articleRight + 30;

        DOM.table.classList.add("tool-table");
        DOM.table.style.left = tableLeft + "px";
        DOM.table.style.maxHeight = ht;

        DOM.content.style.maxHeight = ht;
    }

    let scale = window.devicePixelRatio;

    setInterval(function(){
        // 监测网页缩放率，如果变化了才执行重设目录位置
        let curScale = window.devicePixelRatio;
        // if( curScale !== scale){
            console.log(curScale);
            scale = curScale;
            let articleRight = DOM.article.getBoundingClientRect().right;
            let tableLeft = articleRight + 40;
            DOM.table.classList.add("tool-table");
            DOM.table.style.left = tableLeft + "px";
        // }
    }, 500);

    function addCustomStyles() {
        var css = `
        .tool-table {
           ${CSS_VARS.toolTable}
        }
        `;
        GM_addStyle(css);
    }
    addCustomStyles();


})();
欢迎访问Greasy Fork镜像
