I'm the creator of JANITOR – Java API Navigation Is The Only Rescue which:
Inserts a navigation tree [...] into [...] pages [...].
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. scrollTo works on the visual representation, on the UI.
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:
But instead jdk.management is the last line displayed:
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-coordis 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;"><< </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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> </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>
