Notion Fixed TOC(removed toc scroll bar)

Make Notion TOC Fixed and removed the scroll bar.

  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. })();