在渲染时，大纲点击不跳转 about vditor

[Vanessa219]

参照本地运行的 http://127.0.0.1:9000/render.html 界面，是可以点击滚动的。

[grandsong]

我打了一个外部的补丁，成功实现了预期的功能。

我采用了 vue ，在编辑器的元素上，监听事件 @pointerdown="clickEditor"

clickEditor(ev: PointerEvent) {
  const el = ev.target as HTMLElement
  const el_outline_item = findThisOrAncestor(el, '[data-target-id]')
  // warn('el_outline_item', el_outline_item)
  if (el_outline_item) {
    const outline_item_target_id = el_outline_item.getAttribute('data-target-id')!
    const el_target = document.getElementById(outline_item_target_id)!
    el_target.scrollIntoView()
  }
},

/**
 * 从`el`开始向上（祖先元素）遍历，返回匹配`selector`的第一个元素
 */
export function findThisOrAncestor(el: HTMLElement | null, selector: string) {
  while (el) {
    if (el.matches(selector)) {
      return el
    }
    else {
      el = el.parentElement
    }
  }
  return null
}

[grandsong]

我也遇到了同样的问题。
我是参照 demo 的代码，调用了一个选项参数最简单的实例。
其它功能都很正常，只有大纲点击无效。

[grandsong]

我查看了一下源代码。

在文件 'src\ts\markdown\outlineRender.ts' 中，找到小标题元素 idElement 后，要滚动到它。

这个工作，按理说，用一行代码即可实现：

idElement.scrollIntoView()

不知为何（也许是为了兼容古老的浏览器？），源代码中的实现非常复杂。

可能就是在其中发生了错误。

相关部分如下。

if (target.classList.contains("vditor-outline__action")) {
  ...
} else if (target.getAttribute("data-target-id")) {
    event.preventDefault();
    event.stopPropagation();
    const idElement = document.getElementById(target.getAttribute("data-target-id"));
    if (!idElement) {
        return;
    }
    if (vditor) {
        if (vditor.options.height === "auto") {
            let windowScrollY = idElement.offsetTop + vditor.element.offsetTop;
            if (!vditor.options.toolbarConfig.pin) {
                windowScrollY += vditor.toolbar.element.offsetHeight;
            }
            window.scrollTo(window.scrollX, windowScrollY);
        } else {
            if (vditor.element.offsetTop < window.scrollY) {
                window.scrollTo(window.scrollX, vditor.element.offsetTop);
            }
            if (vditor.preview.element.contains(contentElement)) {
                contentElement.parentElement.scrollTop = idElement.offsetTop;
            } else {
                contentElement.scrollTop = idElement.offsetTop;
            }
        }
    } else {
        window.scrollTo(window.scrollX, idElement.offsetTop);
    }
    break;
}