☰

Notion 浮动 TOC

让 Notion 的 TOC 浮动显示。

  1. // ==UserScript==
  2. // @name         Notion Fixed TOC
  3. // @name:zh-CN   Notion 浮动 TOC
  4. // @namespace    https://notion.cx/
  5. // @version      0.2.0
  6. // @description  Make Notion TOC Fixed.
  7. // @description:zh-cn 让 Notion 的 TOC 浮动显示。
  8. // @author       Ruter Lü
  9. // @match        https://www.notion.so/*
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     /* Helper function to wait for the element ready */
  17.     const waitFor = (...selectors) => new Promise(resolve => {
  18.         const delay = 500;
  19.         const f = () => {
  20.             const elements = selectors.map(selector => document.querySelector(selector));
  21.             if (elements.every(element => element != null)) {
  22.                 resolve(elements);
  23.             } else {
  24.                 setTimeout(f, delay);
  25.             }
  26.         }
  27.         f();
  28.     });
  29.     /* Helper function to wait for the element ready */
  30.  
  31.     let callback = function(mutations) {
  32.         waitFor('.notion-table_of_contents-block').then(([el]) => {
  33.             const toc = document.querySelector('.notion-table_of_contents-block');
  34.             if (toc) {
  35.                 const toc_p = toc.parentElement;
  36.                 if (!toc_p.classList.contains('notion-column-block')) {
  37.                     return;
  38.                 }
  39.                 toc_p.style.position = 'sticky';
  40.                 toc_p.style.top = '0';
  41.                 toc_p.style.overflowY = 'scroll';
  42.                 toc_p.style.maxHeight = '50vh';
  43.             }
  44.         });
  45.     };
  46.     const observer = new MutationObserver(callback);
  47.     let notionApp = document.getElementById('notion-app');
  48.     const config = { childList: true, subtree: true };
  49.     observer.observe(notionApp, config);
  50. })();