2

I'm the creator of JANITOR – Java API Navigation Is The Only Rescue which:

Inserts a navigation tree [...] into [...] pages [...].

The question is about line 286 of that version of the script:

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

where navigation is a div below the "JANITOR – ..." heading line and summary is the highlighted tree element jdk.management in the screenshots below.

With that I expect the navigation area to look like the following after loading the page used in the examples below, i.e. summary placed in about the vertical middle of navigation.clientHeight:

jdk.management should be placed in the vertical middle of navigation

But instead jdk.management is the last line displayed:

jdk.management is last line

which is bad since the tree a user is interested in is not visible immediately.

I tried it with FF 90.0.2 and Chrome 92.0.4515.131. It's the same in both of them.

I looked at W3C, CSSOM View Module, 6. Extensions to the Element Interface, scroll() to find out what I can expect, at least, but I admit that I don't know the implications of each and every term therein and that I'm a bit overwhelmed by the 20 If's, Let's and Do's.

I looked at MDN, Element.scrollTo(), too. The sentence:

y-coord is the pixel along the vertical axis of the element that you want displayed in the upper left.

tells me that summary/jdk.management should be placed as high as possible. Is that right?

What am I misunderstanding and/or doing wrong here?

Test DOM (with scrollTo()'s y-coord adapted for simplification) → works in snippet runner here at SO:

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>

The real DOM (with scrollTo()'s y-coord adapted for simplification) → works in snippet runner here at SO:

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>
Gerold Broser
  • 13,129
  • 4
  • 41
  • 97
  • Hmm.. It seems to me that you're adding the elements one by one, then in the selected one you use the `scrollTo` method. What if you first add all `summary`'s to the DOM and then use `.scrollTo()` (or [this even better](https://stackoverflow.com/a/50453912) method)? – double-beep Sep 21 '21 at 18:13
  • @double-beep Yes, I lazy-load the content of a branch when it is clicked to open it and the idea is to scroll the selected item to appx. 1/4 height from top afterwards. There are so many nodes in the entire tree (and each of them requires a HTTP request for a HTML page) and a userscript is executed at every page refresh so that I refrained from loading all of them at page load in advance. If a branch isn't expanded I think it shouldn't matter whether there is something (hidden) in its DOM (sub-)tree or not. `scroolTo` works on the visual representation, on the UI. – Gerold Broser Sep 21 '21 at 18:30
  • What I'm trying to say is that the scrolling has to be done *after* all the items have loaded - otherwise it's useless. Try to run `summary.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'center' });` (where `summary` is a (random) `` element) in the console and you'll get the result you want. – double-beep Sep 21 '21 at 18:33
  • @double-beep The scrolling _is_ done after loading the items (of the selected branch), (almost) at each end of the two functions: [L286](https://gitlab.com/gerib/userscripts/-/blob/d17636625214b6e64e7dff771af5568b9d86898d/janitor/janitor.user.js#L286), [L380](https://gitlab.com/gerib/userscripts/-/blob/d17636625214b6e64e7dff771af5568b9d86898d/janitor/janitor.user.js#L380). Do you mean to load _all_ items of the entire tree in advance? I tried your code line. It doesn't work either here. I selected **com.sun.management** there: https://imgur.com/a/Fk2aYX1. I want: https://imgur.com/a/s17ueSA. – Gerold Broser Sep 21 '21 at 21:12
  • To understand what I'm saying, you should insert a `debugger;` statement before L286. – double-beep Sep 22 '21 at 04:14
  • @double-beep I added the `debuger` statement. I'm in the debugger view now. What should I see/where should I look there. I'm' sorry, JS is not my primary language. – Gerold Broser Sep 26 '21 at 19:17
  • You should notice that when `.scrollTo` is called to a `summary` element, that `summary` element is the last on the navigation tree, therefore the command has no effect on it. – double-beep Sep 27 '21 at 11:53
  • You should remove the `navigation.scrollTo()` line of code and add `[...document.querySelectorAll('#JANITOR summary')]?.find(element => element.style.fontWeight === 'bold')?.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'center' });` (format it as you like) after the end of the `for (let link of links)` loop. – double-beep Sep 27 '21 at 17:19

1 Answers1

1

Element.scrollTo() is called immediately after the current summary is appended to the navigation list, therefore its position remains the same.

Instead, you should first add all summarys to the DOM and then place the bold summary to the middle. Add this piece of code after all the elements are appended:

[...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'
    });
double-beep
  • 4,567
  • 13
  • 30
  • 40