用户:123855714/ScrollToc.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
Opera：按 Ctrl-F5。
/*
** ScrollToc
** Author:马小萌
** Bilibili:https://space.bilibili.com/123855714
**/
"use strict";

var ScrollToc = {
    ver: "v2.6.3",
    toc:$("#toc"),
    title:$("#toc a"),
    titleTop:[],
    defaultToc:function(){
        $("head").append(`<style type="text/css">
.toc {position:fixed;top:90px;width:280px;max-height:50vh;min-height:100px;display:block;left:0px;z-index:10;padding:7px 17px 20px 7px;overflow-x:hidden;}
.toc::-webkit-scrollbar {width:10px;}
.toc::-webkit-scrollbar-thumb {background:#ccc;border-radius:5px;}
.toc::after {content:"隐藏目录";position:fixed;background-color:#eee;font-weight:bold;left:280px;top:110px;width:20px;padding-left:2px;border:1px solid #a2a9b1;border-left:0;}
.toc h2 {line-height:32px}
.toc>ul {position:relative;margin-left:6px!important;padding-left:13px!important;border-left:2px solid #ccc;z-index:0;}
.toc>ul::before,.toc>ul::after {content:"";position:absolute;width:10px;height:10px;border-radius:5px;border:2px solid #ccc;background:#eee;z-index:3;}
.toc>ul::before {top:-6px;left:-6px;}
.toc>ul::after {top:calc(100% - 6px);left:-6px;}
.toc ul ul {margin:0 0 0 2em;}
.toc li {margin-bottom:0.1em;}
.toc .toctogglespan {display:none;}
.toc .titleArrow::after {content:"";position:absolute;left:2px;margin-top:3px;width:18px;cursor:pointer;height:0px;border:6px solid transparent;border-left:6px solid #5896d5;z-index:4;}
.toc .titleArrow::before {content:"";position:absolute;margin-top:3px;left:-10px;border:6px solid #5896d5;z-index:4;}
.toc .titleArrow {color:black!important;font-weight:bold!important;}
.toc li.toclevel-1:before {content: "";position: absolute;margin-top: 6px;left: -4px;border: 3px solid #999;border-radius: 3px;z-index:1;}
.toc li.toclevel-2:before {content: "";position: absolute;margin-top: 7px;left: -3px;border: 2px solid #999;border-radius: 2px;z-index:1;}
</style>`);
    },
    leftScrolltoc:function(){
        $("head").append(`<style type="text/css">
#leftscrolltoc {position: relative;padding-left: calc(20% + 30px);}
.toc {position: sticky;top: 49px;float: left;margin-left: calc(-20% - 82px);width: calc(20% + 60px);height: calc(100% - 50px);display: block;overflow: auto;padding: 7px 17px 20px 7px;}
.toc::-webkit-scrollbar {width:10px;}
.toc::-webkit-scrollbar-thumb {background:#ccc;border-radius:5px;}
.toc>ul {position:relative;margin-left:16px;padding-left:13px;border-left:2px solid #ccc;z-index:0;}
.toc>ul::before,.toc>ul::after {content:"";position:absolute;width:10px;height:10px;border-radius:5px;border:2px solid #ccc;background:#eee;z-index:3;}
.toc>ul::before {top:-6px;left:-6px;}
.toc>ul::after {top:calc(100% - 6px);left:-6px;}
.toc ul ul {margin:0 0 0 1.2em;}
.toc .toctogglespan {display:none;}
.toc .titleArrow::after {content:"";position:absolute;left:2px;margin-top:3px;width:18px;cursor:pointer;height:0px;border:6px solid transparent;border-left:6px solid #5896d5;z-index:4;}
.toc .titleArrow::before {content:"";position:absolute;margin-top:3px;left:-10px;border:6px solid #5896d5;z-index:4;}
.toc .titleArrow {color:black!important;font-weight:bold!important;}
.toc li.toclevel-1:before {content: "";position: absolute;margin-top: 6px;left: -4px;border: 3px solid #999;border-radius: 3px;z-index:1;}
.toc li.toclevel-2:before {content: "";position: absolute;margin-top: 7px;left: -3px;border: 2px solid #999;border-radius: 2px;z-index:1;}
</style>`);
        $("#leftscrolltoc").prepend(toc);
    },
    rightScrolltoc:function(){
        $("head").append(`<style type="text/css">
#rightscrolltoc {position: relative;padding-right: calc(20% + 30px);}
.toc {position: sticky;top: 49px;float: right;margin-right: calc(-20% - 82px);width: calc(20% + 60px);height: calc(100% - 50px);display: block;overflow: auto;padding: 7px 17px 20px 7px;}
.toc::-webkit-scrollbar {width:10px;}
.toc::-webkit-scrollbar-thumb {background:#ccc;border-radius:5px;}
.toc>ul {position:relative;margin-left:16px;padding-left:13px;border-left:2px solid #ccc;z-index:0;}
.toc>ul::before,.toc>ul::after {content:"";position:absolute;width:10px;height:10px;border-radius:5px;border:2px solid #ccc;background:#eee;z-index:3;}
.toc>ul::before {top:-6px;left:-6px;}
.toc>ul::after {top:calc(100% - 6px);left:-6px;}
.toc ul ul {margin:0 0 0 1.2em;}
.toc .toctogglespan {display:none;}
.toc .titleArrow::after {content:"";position:absolute;left:2px;margin-top:3px;width:18px;cursor:pointer;height:0px;border:6px solid transparent;border-left:6px solid #5896d5;z-index:4;}
.toc .titleArrow::before {content:"";position:absolute;margin-top:3px;left:-10px;border:6px solid #5896d5;z-index:4;}
.toc .titleArrow {color:black!important;font-weight:bold!important;}
.toc li.toclevel-1:before {content: "";position: absolute;margin-top: 6px;left: -4px;border: 3px solid #999;border-radius: 3px;z-index:1;}
.toc li.toclevel-2:before {content: "";position: absolute;margin-top: 7px;left: -3px;border: 2px solid #999;border-radius: 2px;z-index:1;}
</style>`);
        $("#rightscrolltoc").prepend(toc);
    },
    init:function(){
        if($("#noscrolltoc").length)return;
        if(this.toc.length==0)return;
        if($("#leftscrolltoc").length){
            if($("body").width()<=1200)return;
            this.leftScrolltoc();
        }else if($("#rightscrolltoc").length){
            if($("body").width()<=1200)return;
            this.rightScrolltoc();
        }else{
            if($("body").width()<=600)return;
            this.defaultToc();
            $("body").append($("#toc"));
        }
        this.load();
        console.log("%c ScrollToc %c%shttps://wiki.biligame.com/wiki/?curid=2356", "color: #fff; padding: 5px 0; background: #f3a034;", "padding: 5px 6px 5px 5px; background: #ffffe5;",this.ver);
    },
    load:function(){
        this.title.each(function() {
            let titleOffset = $(`[id='${decodeURIComponent(this.hash.substr(1))}']`).offset().top;
            ScrollToc.titleTop.push(titleOffset);
            $(this).on("click", function(e) {
                $("html,body").animate({scrollTop: titleOffset - 250}, 350);
                return false;
            });
            if(this.hash.substr(1)==location.href.replace(/^.+#(.+)$/,"$1")){
                setTimeout(function() {
                    $("html,body").scrollTop(titleOffset - 250);
                }, 2000);
            }
        });
        $(document).on("scroll", function(){
            let index = ScrollToc.titleTop.length-1;
            for(let i in ScrollToc.titleTop) {
                if(window.scrollY<ScrollToc.titleTop[i]-150){
                    index = i;
                    break;
                }
            };
            ScrollToc.toc.scrollTop(ScrollToc.title[index].offsetTop-ScrollToc.toc.outerHeight()/4);
            ScrollToc.title.removeClass("titleArrow");
            ScrollToc.title[index].classList.add("titleArrow");
        });
        ScrollToc.toc.on('click', function (e) {
          console.log($(this).css("left"),`-${$(this).css("width")}`);
            if($(this).css("left")=="0px"){
                $(this).css("left",`-${$(this).css("width")}`);
                document.styleSheets[document.styleSheets.length-1].addRule('#toc:after',"left:0px;");
            }else{
                $(this).css("left","0");
                document.styleSheets[document.styleSheets.length-1].addRule('#toc:after',`left: ${$(this).css("width")}`);
            }
        });
        // if($(".mw-parser-output").css("background-color")=="rgba(0, 0, 0, 0)"){
        //     $("head").append(`<style type="text/css">h2 {position:sticky;top:48;background-color:#fff;z-index:8;}</style>`);
        // }else{
        //     $("head").append(`<style type="text/css">h2 {position:sticky;top:48;background-color:inherit;z-index:8;}</style>`);
        // }
    }
}
ScrollToc.init();