Markdown 标题对齐的同步滚动

2023-12-15 14:13:38

Markodwn 标题对齐的同步滚动功能可以帮助您在编辑 Markdown 文档时，快速地找到您想要的内容。这个功能可以让您在编辑器中滚动时，标题始终保持在屏幕的顶部。这样，您就可以一目了然地看到您正在编辑的标题，而不用再费力地去寻找它。

实现这个功能的方法有很多种。一种简单粗暴的方法就是直接让 HTML 元素的 scrollTop 相等。但是，这种方法可能会导致性能问题，因为每次滚动时都需要重新计算所有元素的 scrollTop。

一种更优化的实现方式是使用 Intersection Observer API。这个 API 可以让您在元素进入或离开视口时触发回调函数。这样，您就可以只在需要的时候更新元素的 scrollTop。

下面是使用 Intersection Observer API 实现 Markdown 标题对齐的同步滚动功能的步骤：

在您的 Markdown 编辑器中，为每个标题添加一个唯一的 ID。
创建一个 Intersection Observer 实例，并为其设置回调函数。
在回调函数中，获取当前正在视口中的标题元素。
将其他所有标题元素的 scrollTop 设置为当前正在视口中的标题元素的 scrollTop。

下面是实现这个功能的代码示例：

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const activeTitle = entry.target;
      const otherTitles = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

      otherTitles.forEach((title) => {
        if (title !== activeTitle) {
          title.scrollTop = activeTitle.scrollTop;
        }
      });
    }
  });
});

document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((title) => {
  observer.observe(title);
});