Looking for help identifying the top-most visible outline item...

[joshgreco]

I'd like to have my Outline items highlight as I scroll through the PDF. Here's a screenshot of what the UI currently looks like. I'd like the Outline item for "Minigames" be highlighted since its the top-most section currently visible in the viewport.

For doing the same thing with page thumbnails I was able to use an intersection observer to get the currently visible page element as the user scrolls. That was pretty simple.

However, there doesn't appear to be an easy way to accomplish this for the section headers that appear in the outline. Each bit of text in a page's text layer appears within a span.markedContent without any other indication that it is a section header or appears in the document's outline. An example:

<span class="markedContent" id="p17R_mc1">
    <br role="presentation">
    <span role="presentation" dir="ltr" style="left: calc(var(--scale-factor)*72.00px); top: calc(var(--scale-factor)*124.33px); font-size: calc(var(--scale-factor)*16.00px); font-family: sans-serif; transform: scaleX(1.01199);">Minigames</span>
</span>

I also can't seem to wrap my head around an outline item's destination value. Here is the destination for the above span:

[
  {
    "num": 17,
    "gen": 0
  },
  {"name": "XYZ"},
  73.344002,
  667.28424,
  0
]

This destination (and accompanying span) appears near the top of page 6 of the PDF (see screenshot above). I found code to get the page index from a dest, but I can't seem to figure out what those coordinates refer to. In this case 667.28424 (presumably the y value) doesn't match up with anything I can see. The page it appears on has a height of 1035px. The span's top value is calc(var(--scale-factor)*124.33px) and the scale-factor is 1.3071895424836601 so the calculated top value is 162.523px. That doesn't match the 667.28424 in any way I can figure.

I thought maybe it referred to the bottom value, but in this case the bottom value would be 851px. Even after taking into account the scale-factor, 667.28424 * 1.3071 = 872.2072301039999. Nothing seems to add up.

Does anyone have any ideas? Maybe I'm going about this the wrong way?