确保关注隐藏在固定选项卡后面的元素。（表现得像 "heading map"）

Question

关于所谓的大纲 (TOC) 功能。

【规格】

浏览器缩放比例调整为 150%。

对于Chrome 用"Ctrl" + "Shift" + "H"键显示。

Firefox不能用H键，暂且用"Alt" + "Shift" + "O"键显示。

按同一个键隐藏或者，单击大纲以外的元素将其隐藏。或者，按红色“x”按钮将其隐藏。

火狐浏览器对于 ID (#created_toc) 元素字体大小：10px；行高：1.5em；请替换为.

document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.shiftKey && e.key == 'H') {
        // Firefox cannot use the "H" key, so
        // if( e.altKey && e.shiftKey && e.key=='O' ){
        let all, pLevel, cLevel, cList, counter, div, style, ol, li, a, i, j;
        let d = document;
        let toc = d.getElementById("created_toc");
        let close_toc = d.getElementById("my_toc_close_btn");
        if (toc) {
            d.body.removeChild(toc);
            d.body.removeChild(close_toc);
        } else {
            all = d.getElementsByTagName("*");
            let toc = d.createElement("ol");
            //let close_toc=d.createElement("ol");
            toc.onclick = new Function("event", `
let target=event.target,ols=target.getElementsByTagName("ol"),flag=target.flag==0;
if(ols.length>0){ols.item(0).style.display=flag?"block":"none";
target.style.listStyleImage=flag?"none":"url(data:image/gif;)";
target.flag=flag?1:0;}
`);

            let cList = toc;
            let pLevel = 1;
            let counter = [0, 0, 0, 0, 0, 0];
            for (i = 0; i < all.length; i++) {
                if (all.item(i).tagName.match(/^h([1-6])$/i)) {
                    let cLevel = RegExp.;
                    let a = d.createElement("a");
                    //a+="&nbsp";
                    a.href = "javascript:;";
                    a.onclick = new Function('document.getElementsByTagName("h' + cLevel + '").item(' + counter[cLevel - 1] + ').scrollIntoView();');
                    a.appendChild(d.createTextNode(all.item(i).textContent));
                    /*
                    d.createElement("a").onclick = (event) => {
                                toggle(event);
                                target.focus();
                            };
                    */
                    let li = d.createElement("li");
                    li.appendChild(a);
                    counter[cLevel - 1]++;
                    if (cLevel > pLevel) {
                        ol = d.createElement("ol");
                        ol.style.padding = "1em";
                        ol.style.margin = "0em 1em";
                        ol.appendChild(li);
                        if (cList.lastChild) {
                            cList.lastChild.appendChild(ol);
                        } else {
                            cList.appendChild(ol);
                        }
                        cList = ol;
                    } else if (cLevel < pLevel) {
                        for (j = 0; j < (pLevel - cLevel) * 2; j++)
                            if (cList.parentNode) cList = cList.parentNode;
                        cList.appendChild(li);
                    } else {
                        cList.appendChild(li);
                    }
                    pLevel = cLevel;
                }
            }

            let style = d.createElement("style");
            style.appendChild(d.createTextNode(`
#created_toc{
text-align:left;
position:fixed;
top:0px;
right:0px;

/* max- Exclude */
width:25%;
height:98%;

/*☆☆☆ Firefox font-size:10px; line-height:1.5em; ☆☆☆*/
font-size:1px;
line-height: 20em;

overflow:auto;
background:#eef1f1;
-moz-opacity:0.9;
border-style:solid;
border-width: 2px;
border-color: #000;
border-radius:11px;
z-index:999999999;
}
#created_toc a:link{ 
color: #0416fb;}
#created_toc a:hover{
color: #01afd5;
}
#created_toc ol{
counter-reset:item;} 
#created_toc li{
counter-increment:item;
list-style-type:none;
white-space:pre;
/* word-break:keep-all; */
} 
#created_toc li:before{
font-size:smaller;
/* word-break:keep-all;*/
content:counters(item,'.') '. ';
cursor:ns-resize;
}

#my_toc_close_btn{
position:fixed;
align-items: center;
text-align:justify-all;
line-height:5px;

/* justify-content:center; */
/* display:inline-block; */
margin-right:240px;
top:0px;
right:8px;
background:red;
font-size:10px;

height:12px;
width:13px;
content:"x";
color:#000;
border-radius:4px;
cursor:pointer;
z-index:999999999;
}
`));

            let div = d.createElement("div");
            div.id = "created_toc";
            div.appendChild(style);
            div.appendChild(toc, close_toc);
            d.body.insertBefore(div, d.body.firstChild);

            document.body.insertAdjacentHTML('beforeend', `
<input type="button" id="my_toc_close_btn" value="x" />
 `);
        }

    }


    // Clicking on an element other than the outliner hides the outliner element.
    document.addEventListener('click', (c) => {
        let toc = document.getElementById("created_toc");
        let close_toc = document.getElementById("my_toc_close_btn");
        if (toc, close_toc) {
            if (!c.target.closest('#created_toc')) {
                document.body.removeChild(toc);
                document.body.removeChild(close_toc);
                // document.getElementById("my_toc_close_btn").style.display="none";
            }
        }
    });

    // Hide the outliner by clicking the red "x" button.
    document.getElementById("my_toc_close_btn")
        .addEventListener('click', () => {
            let toc = document.getElementById("created_toc");
            let close_toc = document.getElementById("my_toc_close_btn");
            if (toc, close_toc) {
                document.body.removeChild(toc);
                document.body.removeChild(close_toc);
                // document.getElementById("my_toc_close_btn").style.display="none";
            }
        });

});

【问题】

我个人认为这是一个不错的结果，但有一个问题。

于 whosebug.com https://whosebug.com/questions/tagged/javascript

（日语站点）Yahoo!首页等 https://www.yahoo.co.jp/ 我可以毫无问题地跳到目标，

(问答网站)千袋分类问答列表页 https://chiebukuro.yahoo.co.jp/category/2080401322/question/list?sort=16 比如你运行outliner里的进程，进程会隐藏在Fixed(position:fixed;好像)选项卡后面，最后还得手动向上滚动一点。

我查看了各种大纲和相关站点，但到目前为止只有以下稍重的扩展解决了这个问题： https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi

https://addons.mozilla.org/en/firefox/addon/headingsmap/?utm_content=addons-manager-reviews-link&utm_medium=firefox-browser&utm_source=firefox-browser

当我在大纲侧单击 link 后立即跳转到实际的 link 时，我重新 focus() 编辑了实际的 link ，所以我个人认为我每次都绝对可以跳到目标上。 ,

【我想达到的目标】

如果是这样，可以对代码进行哪些更改以确保专注并专注于实现理想的行为？

Answer 1

【旧代码】

a.onclick = new Function('document.getElementsByTagName("h' + cLevel + '").item(' + counter[cLevel - 1] + ').scrollIntoView();');

【自解代码】

a.onclick=new Function('document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+').scrollIntoView((true));window.scrollBy(0, -57);document.getElementsByTagName("h'+cLevel+'").item('+counter[cLevel-1]+').style.cssText ="border: solid 2px red !important;"; ');

.scrollIntoView(); 元素一进入它就会停止。这与工作列表不兼容，例如“position: fixed;”标签。它隐藏在选项卡后面。

.scrollIntoView((true));window.scrollBy(0, -57); 我换成了，把stop的位置调到前面，加了个红色的标记，这样即使不在固定位置也很容易看懂

这是完成版。

https://codepen.io/mosthighmilkchocolate/pen/qBmaayz?editors=0010 如果您有兴趣，欢迎前来参观。

确保关注隐藏在固定选项卡后面的元素。（表现得像 "heading map"）

To ensure focus on the elements hidden behind the fixed tabs. (To behave like a "heading map")

javascript

html

jquery

css

focus

确保关注隐藏在固定选项卡后面的元素。 （表现得像 "heading map"）

To ensure focus on the elements hidden behind the fixed tabs. (To behave like a "heading map")

javascript

html

jquery

css

focus

确保关注隐藏在固定选项卡后面的元素。（表现得像 "heading map"）