如何移除Obsidian中TOC的滚动事件处理器以固定显示？

问题场景：在Obsidian中通过自定义CSS和HTML创建固定跟随的TOC，配置代码如下，但滚动到页面25%-50%位置时TOC会消失。经排查是主类绑定的滚动事件会隐藏不在视图内的元素，手动删除该事件可解决但重启/刷新后恢复，需求是让TOC始终固定显示。

现有配置代码 #

CSS：

#TOC,
.TOC {
  position: fixed;
  top: 2rem;
  right: 0;
  display: inline-block;
  float: right;
  z-index: 10;
}

HTML：

<div id="TOC">
  <ul>
    <li><a class="internal-link" data-href="#Explore" href="#Explore" target="_blank" rel="noopener">Explore</a></li>
    <li><a class="internal-link" data-href="#New" href="#New" target="_blank" rel="noopener">New</a></li>
  </ul>
</div>

解决方案一：强制CSS优先级覆盖隐藏逻辑 #

直接在现有CSS中添加强制显示属性，抵消滚动事件触发的隐藏样式：

#TOC,
.TOC {
  position: fixed;
  top: 2rem;
  right: 0;
  display: inline-block !important;
  float: right;
  z-index: 9999 !important; /* 提升层级避免被其他元素遮挡 */
  visibility: visible !important;
  opacity: 1 !important;
}

通过!important强制覆盖滚动事件可能设置的display: none、visibility: hidden或opacity: 0等隐藏规则，确保TOC始终可见。

解决方案二：用自定义JS永久移除滚动事件影响 #

如果CSS方法无效，可通过JS阻止滚动事件对TOC的作用：

1. 在Obsidian设置中启用第三方插件，安装并开启Custom JS插件（或使用部分主题自带的自定义脚本功能）
2. 在Obsidian的.obsidian/snippets/或Custom JS指定文件夹中新建toc-fix.js，粘贴以下代码：

document.addEventListener('DOMContentLoaded', () => {
  // 阻止TOC元素的滚动事件冒泡，避免被上层逻辑处理
  const tocElement = document.getElementById('TOC');
  if (tocElement) {
    tocElement.addEventListener('scroll', (e) => e.stopPropagation(), true);
  }

  // 可选：直接移除主内容区域的滚动事件（替换`.main-content`为实际主类选择器）
  const mainContent = document.querySelector('.main-content');
  if (mainContent) {
    const scrollEvents = getEventListeners(mainContent).scroll || [];
    scrollEvents.forEach(event => mainContent.removeEventListener('scroll', event.listener));
  }
});

3. 在Obsidian中启用该脚本，重启应用后生效。

说明：第一种JS逻辑是阻止TOC的滚动事件向上传递，避免被主类的隐藏逻辑捕获；第二种是直接移除主内容区域的滚动事件，彻底消除隐藏触发源。主类选择器可通过Obsidian开发者工具（按F12）查看实际元素类名替换。

内容的提问来源于stack exchange，提问作者Reclusive Eagle