Element.scroll[To]() 在用户脚本中无法按预期工作答案

【问题标题】：Element.scroll[To]() doesn't work as expected in a userscriptElement.scroll[To]() 在用户脚本中无法按预期工作
【发布时间】：2021-11-08 01:40:25
【问题描述】：

我是JANITOR – Java API Navigation Is The Only Rescue 的创建者：

将导航树 [...] 插入 [...] 页面 [...]。

问题是关于line 286 of that version of the script：

navigation.scrollTo( 0, summary.offsetTop - navigation.clientHeight / 2 )

其中navigation 是“JANITOR – ...”标题行下方的div，summary 是下面屏幕截图中突出显示的树元素jdk.management。

因此，我希望加载the page used in the examples below 后导航区域如下所示，即summary 放置在navigation.clientHeight 的垂直中间位置：

但是 jdk.management 是显示的最后一行：

这很糟糕，因为用户感兴趣的树不会立即可见。

我尝试使用 FF 90.0.2 和 Chrome 92.0.4515.131。两者都是一样的。

我查看了W3C, CSSOM View Module, 6. Extensions to the Element Interface, scroll() 以了解我至少可以期待什么，但我承认我不知道其中每个术语的含义，而且我对 20 个 If 有点不知所措，让我们一起行动吧。

我也看了MDN, Element.scrollTo()。句子：

y-coord 是要显示在左上角的元素沿纵轴的像素。

告诉我summary/jdk.management 应该放在尽可能高的位置。对吗？

我在这里误解和/或做错了什么？

测试 DOM（使用 scrollTo() 的 y-coord 进行简化）→ 在 SO 的 sn-p runner 中工作：

let nav = document.querySelector('#nav')
console.info("nav = ", nav)
let selected = document.querySelector('#selected')
console.info("selected = ", selected)
nav.scrollTo( 0, selected.offsetTop )

<!DOCTYPE html>
<html>
<body>

<div id="nav" style="height:256px; overflow-y:scroll;">

    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>

    <details>
    <summary id="selected">This line is expected to be at the top of or at least as high as possible in this scrollable (#nav) immediately after running the snippet.</summary>
    <a href="https://docs.oracle.com/en/java/javase/16/docs/api/jdk.management/module-summary.html">https://docs.oracle.com/en/java/javase/16/docs/api/jdk.management/module-summary.html</a>
    </details>

    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    <details>
    <summary>...summary...</summary>
    <p>...content...</p>
    </details>
    
</body>
</html>

真正的 DOM（带有 scrollTo() 的 y-coord 进行了简化）→ 在 SO 的 sn-p runner 中工作：

let nav = document.querySelector('#nav')
console.info("nav =", nav)
let selected = document.querySelector('#jdk-mgmt')
console.info("selected =", selected)
nav.scrollTo(0, selected.offsetTop)

<div id="JANITOR">
  <div id="title" style="position: fixed; width: 30em; border-bottom: 1px solid; padding: 3px; text-align: center;"><a href="https://github.com/gerib/userscripts/wiki/JANITOR-%E2%80%93-Java-API-Navigation-Is-The-Only-Rescue" target="_blank" title="JANITOR – Java API Navigation Is The Only Rescue">JANITOR – Java API Navigation Is The Only Rescue</a><a href="#" title="Hide JANITOR"
      style="padding-right: 8px; float: right;">&lt;&lt; </a></div>
  <div id="nav" style="width: 30em; height: 416px; top: 24px; position: fixed; overflow-y: scroll; padding-top: 3px;">
    <details>
      <summary><span title="Module java.base" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.base/module-summary.html" title="Module java.base">java.base</a></summary>
    </details>
    <details>
      <summary><span title="Module java.compiler" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.compiler/module-summary.html" title="Module java.compiler">java.compiler</a></summary>
    </details>
    <details>
      <summary><span title="Module java.datatransfer" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.datatransfer/module-summary.html" title="Module java.datatransfer">java.datatransfer</a></summary>
    </details>
    <details>
      <summary><span title="Module java.desktop" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.desktop/module-summary.html" title="Module java.desktop">java.desktop</a></summary>
    </details>
    <details>
      <summary><span title="Module java.instrument" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.instrument/module-summary.html" title="Module java.instrument">java.instrument</a></summary>
    </details>
    <details>
      <summary><span title="Module java.logging" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.logging/module-summary.html" title="Module java.logging">java.logging</a></summary>
    </details>
    <details>
      <summary><span title="Module java.management" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.management/module-summary.html" title="Module java.management">java.management</a></summary>
    </details>
    <details>
      <summary><span title="Module java.management.rmi" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.management.rmi/module-summary.html" title="Module java.management.rmi">java.management.rmi</a></summary>
    </details>
    <details>
      <summary><span title="Module java.naming" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.naming/module-summary.html" title="Module java.naming">java.naming</a></summary>
    </details>
    <details>
      <summary><span title="Module java.net.http" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.net.http/module-summary.html" title="Module java.net.http">java.net.http</a></summary>
    </details>
    <details>
      <summary><span title="Module java.prefs" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.prefs/module-summary.html" title="Module java.prefs">java.prefs</a></summary>
    </details>
    <details>
      <summary><span title="Module java.rmi" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.rmi/module-summary.html" title="Module java.rmi">java.rmi</a></summary>
    </details>
    <details>
      <summary><span title="Module java.scripting" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.scripting/module-summary.html" title="Module java.scripting">java.scripting</a></summary>
    </details>
    <details>
      <summary><span title="Module java.se" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.se/module-summary.html" title="Module java.se">java.se</a></summary>
    </details>
    <details>
      <summary><span title="Module java.security.jgss" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.security.jgss/module-summary.html" title="Module java.security.jgss">java.security.jgss</a></summary>
    </details>
    <details>
      <summary><span title="Module java.security.sasl" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.security.sasl/module-summary.html" title="Module java.security.sasl">java.security.sasl</a></summary>
    </details>
    <details>
      <summary><span title="Module java.smartcardio" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.smartcardio/module-summary.html" title="Module java.smartcardio">java.smartcardio</a></summary>
    </details>
    <details>
      <summary><span title="Module java.sql" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.sql/module-summary.html" title="Module java.sql">java.sql</a></summary>
    </details>
    <details>
      <summary><span title="Module java.sql.rowset" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.sql.rowset/module-summary.html" title="Module java.sql.rowset">java.sql.rowset</a></summary>
    </details>
    <details>
      <summary><span title="Module java.transaction.xa" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.transaction.xa/module-summary.html" title="Module java.transaction.xa">java.transaction.xa</a></summary>
    </details>
    <details>
      <summary><span title="Module java.xml" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.xml/module-summary.html" title="Module java.xml">java.xml</a></summary>
    </details>
    <details>
      <summary><span title="Module java.xml.crypto" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//java.xml.crypto/module-summary.html" title="Module java.xml.crypto">java.xml.crypto</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.accessibility" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.accessibility/module-summary.html" title="Module jdk.accessibility">jdk.accessibility</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.attach" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.attach/module-summary.html" title="Module jdk.attach">jdk.attach</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.charsets" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.charsets/module-summary.html" title="Module jdk.charsets">jdk.charsets</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.compiler" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.compiler/module-summary.html" title="Module jdk.compiler">jdk.compiler</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.crypto.cryptoki" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.crypto.cryptoki/module-summary.html" title="Module jdk.crypto.cryptoki">jdk.crypto.cryptoki</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.crypto.ec" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.crypto.ec/module-summary.html" title="Module jdk.crypto.ec">jdk.crypto.ec</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.dynalink" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.dynalink/module-summary.html" title="Module jdk.dynalink">jdk.dynalink</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.editpad" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.editpad/module-summary.html" title="Module jdk.editpad">jdk.editpad</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.hotspot.agent" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.hotspot.agent/module-summary.html" title="Module jdk.hotspot.agent">jdk.hotspot.agent</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.httpserver" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.httpserver/module-summary.html" title="Module jdk.httpserver">jdk.httpserver</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.incubator.foreign" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.incubator.foreign/module-summary.html" title="Module jdk.incubator.foreign">jdk.incubator.foreign</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.incubator.vector" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.incubator.vector/module-summary.html" title="Module jdk.incubator.vector">jdk.incubator.vector</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jartool" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jartool/module-summary.html" title="Module jdk.jartool">jdk.jartool</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.javadoc" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.javadoc/module-summary.html" title="Module jdk.javadoc">jdk.javadoc</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jcmd" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jcmd/module-summary.html" title="Module jdk.jcmd">jdk.jcmd</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jconsole" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jconsole/module-summary.html" title="Module jdk.jconsole">jdk.jconsole</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jdeps" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jdeps/module-summary.html" title="Module jdk.jdeps">jdk.jdeps</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jdi" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jdi/module-summary.html" title="Module jdk.jdi">jdk.jdi</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jdwp.agent" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jdwp.agent/module-summary.html" title="Module jdk.jdwp.agent">jdk.jdwp.agent</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jfr" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jfr/module-summary.html" title="Module jdk.jfr">jdk.jfr</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jlink" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jlink/module-summary.html" title="Module jdk.jlink">jdk.jlink</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jpackage" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jpackage/module-summary.html" title="Module jdk.jpackage">jdk.jpackage</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jshell" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jshell/module-summary.html" title="Module jdk.jshell">jdk.jshell</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jsobject" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jsobject/module-summary.html" title="Module jdk.jsobject">jdk.jsobject</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.jstatd" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.jstatd/module-summary.html" title="Module jdk.jstatd">jdk.jstatd</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.localedata" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.localedata/module-summary.html" title="Module jdk.localedata">jdk.localedata</a></summary>
    </details>
    <details open="">

<!-- -->
      <summary id="jdk-mgmt" style="font-weight: bold;">

        <span title="Module jdk.management" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.management/module-summary.html" title="Module jdk.management">jdk.management</a>

      </summary>

<!-- -->

      <details>
        <summary><span title="Package com.sun.management" style="cursor: default;">├─ <span style="color:purple;">Ⓟ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api/jdk.management/com/sun/management/package-summary.html" title="Package com.sun.management">com.sun.management</a></summary>
      </details>
      <details>
        <summary><span title="Package java.lang.management" style="cursor: default;">└─ <span style="color:purple;">Ⓟ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api/jdk.management/../java.management/java/lang/management/package-summary.html"
            title="Package java.lang.management"><code>java.lang.management</code></a></summary>
      </details>
    </details>
    <details>
      <summary><span title="Module jdk.management.agent" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.management.agent/module-summary.html" title="Module jdk.management.agent">jdk.management.agent</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.management.jfr" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.management.jfr/module-summary.html" title="Module jdk.management.jfr">jdk.management.jfr</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.naming.dns" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.naming.dns/module-summary.html" title="Module jdk.naming.dns">jdk.naming.dns</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.naming.rmi" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.naming.rmi/module-summary.html" title="Module jdk.naming.rmi">jdk.naming.rmi</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.net" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.net/module-summary.html" title="Module jdk.net">jdk.net</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.nio.mapmode" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.nio.mapmode/module-summary.html" title="Module jdk.nio.mapmode">jdk.nio.mapmode</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.sctp" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.sctp/module-summary.html" title="Module jdk.sctp">jdk.sctp</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.security.auth" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.security.auth/module-summary.html" title="Module jdk.security.auth">jdk.security.auth</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.security.jgss" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.security.jgss/module-summary.html" title="Module jdk.security.jgss">jdk.security.jgss</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.xml.dom" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.xml.dom/module-summary.html" title="Module jdk.xml.dom">jdk.xml.dom</a></summary>
    </details>
    <details>
      <summary><span title="Module jdk.zipfs" style="cursor: default;"><span style="color:black;">Ⓜ</span> &nbsp;</span><a href="https://docs.oracle.com/en/java/javase/16/docs/api//jdk.zipfs/module-summary.html" title="Module jdk.zipfs">jdk.zipfs</a></summary>
    </details>
  </div>
</div>

【问题讨论】：

Hmm.. 在我看来，您正在逐个添加元素，然后在选定的元素中使用scrollTo 方法。如果先将所有summary 添加到DOM，然后使用.scrollTo()（或this even better 方法）会怎样？
@double-beep 是的，我在单击打开分支时延迟加载分支的内容，并且想法是将所选项目滚动到 appx。之后距顶部 1/4 高度。整个树中有很多节点（每个节点都需要对 HTML 页面的 HTTP 请求），并且在每次页面刷新时都会执行一个用户脚本，因此我避免在页面加载时提前加载所有节点。如果一个分支没有展开，我认为它的 DOM（子）树中是否有东西（隐藏）并不重要。 scroolTo 在 UI 上处理视觉表示。
我想说的是，滚动必须在所有项目加载后完成 - 否则它是无用的。尝试在控制台中运行summary.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'center' });（其中summary 是（随机）<summary> 元素），你会得到你想要的结果。
@double-beep 滚动是在加载项目（所选分支的）后完成的，（几乎）在两个函数的每一端：L286,@ 987654330@。您的意思是提前加载整个树的所有项吗？我试过你的代码行。它在这里也不起作用。我在那里选择了 com.sun.management：imgur.com/a/Fk2aYX1。我要：imgur.com/a/s17ueSA.
要理解我的意思，你应该在 L286 之前插入一个debugger; 语句。

标签： javascript dom userscripts dom-element element-scrollto

【解决方案1】：

Element.scrollTo()在当前summary添加到导航列表后立即被调用，因此它的位置保持不变。

相反，您应该首先将所有summarys 添加到DOM，然后将粗体summary 放在中间。添加完所有元素后添加这段代码：

[...document.querySelectorAll('#JANITOR summary')] // get all the summaries
    ?.find(element => element.style.fontWeight === 'bold') // and fetch the bold/user-selected one
    ?.scrollIntoView({ // then align it to the middle, https://stackoverflow.com/a/50453912
        behavior: 'auto',
        block: 'center',
        inline: 'center'
    });

【讨论】：