☰

Notion 浮动 TOC(去除目录滚动条)

让 Notion 的 TOC 浮动显示, 并且去除目录滚动条。

  1. // ==UserScript==
  2. // @name         Notion Fixed TOC(removed toc scroll bar)
  3. // @name:zh-CN   Notion 浮动 TOC(去除目录滚动条)
  4. // @namespace    https://notion.cx/
  5. // @version      0.2.0
  6. // @description  Make Notion TOC Fixed and removed the scroll bar.
  7. // @description:zh-cn 让 Notion 的 TOC 浮动显示, 并且去除目录滚动条。
  8. // @author       Kevin Axel
  9. // @match        https://www.notion.so/*
  10. // @grant        none
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     let addRule = (function (style) {
  18.         let sheet = document.head.appendChild(style).sheet;
  19.         return function (selector, css) {
  20.             let propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
  21.                 return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
  22.             }).join(";");
  23.             sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
  24.         };
  25.     })(document.createElement("style"));
  26.  
  27.     addRule(".hidden-scrollbar::-webkit-scrollbar", {
  28.         width: '0px'
  29.     });
  30.  
  31.     /* Helper function to wait for the element ready */
  32.     const waitFor = (...selectors) => new Promise(resolve => {
  33.         const delay = 500;
  34.         const f = () => {
  35.             const elements = selectors.map(selector => document.querySelector(selector));
  36.             if (elements.every(element => element != null)) {
  37.                 resolve(elements);
  38.             } else {
  39.                 setTimeout(f, delay);
  40.             }
  41.         }
  42.         f();
  43.     });
  44.     /* Helper function to wait for the element ready */
  45.  
  46.     let callback = function(mutations) {
  47.         waitFor('.notion-table_of_contents-block').then(([el]) => {
  48.             const toc = document.querySelector('.notion-table_of_contents-block');
  49.             if (toc) {
  50.                 const toc_p = toc.parentElement;
  51.                 if (!toc_p.classList.contains('notion-column-block')) {
  52.                     return;
  53.                 }
  54.  
  55.                 toc_p.style.position = 'sticky';
  56.                 toc_p.style.top = '0';
  57.                 toc_p.style.overflowY = 'scroll';
  58.                 toc_p.style.maxHeight = '90vh';
  59.  
  60.                 // hidden scrollbar
  61.                 toc_p.id = 'hidden_scrollbar';
  62.                 document.getElementById("hidden_scrollbar").classList.add('hidden-scrollbar');
  63.             }
  64.         });
  65.     };
  66.     const observer = new MutationObserver(callback);
  67.     let notionApp = document.getElementById('notion-app');
  68.     const config = { childList: true, subtree: true };
  69.     observer.observe(notionApp, config);
  70. })();