🐛 Nightmare Bug – Scroll Event Listening Offset Calculation Bug

pages/api/feedback.ts

@@ -1,3 +1,4 @@
+//TODO – this is no longer needed, https://github.com/tinacms/tina.io/issues/2215
 import Airtable from 'airtable'
 
 interface FeedbackRecord {

pages/api/graphql.ts

@@ -1,5 +1,6 @@
-import * as gqlPackage from '@tinacms/graphql-old'
+//TODO – check if this is still needed, the graphiql playgrounds have already been replaced, see https://github.com/tinacms/tina.io/issues/2001
 import * as datalayerPackage from '@tinacms/datalayer-old'
+import * as gqlPackage from '@tinacms/graphql-old'
 
 export default async function feedback(req, res) {
   class InMemoryStore extends datalayerPackage.LevelStore {

utils/toc_helpers.ts

@@ -29,23 +29,37 @@ export function createTocListener(
   setActiveIds: (activeIds: string[]) => void
 ): () => void {
   let tick = false
-  const BASE_OFFSET = 16
   const THROTTLE_INTERVAL = 100
   const headings = createHeadings(contentRef)
+  //Find the maximum pixel value from vertical scroll
+  const maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
+
+  const relativePositionHeadingMap = headings.map((heading) => {
+    return {
+      ...heading,
+      //Find the relative position of the heading based on the page content.
+      relativePagePosition: (heading.offset / contentRef.current.scrollHeight),
+    }
+  });
 
   const throttledScroll = () => {
+    //Find the current vertical scroll pixel value
     const scrollPos = window.scrollY
     const newActiveIds = []
-    const activeHeadingCandidates = headings.filter((heading) => {
-      return heading.offset - scrollPos < BASE_OFFSET
+    //Find the relative position on the page based on the scroll.
+    const relativeScrollPosition = scrollPos / maxScrollY
+    //Find the headings that are above the current scroll position
+    //This is adjusted to account for differences between min/max scroll values and content height
+    const activeHeadingCandidates = relativePositionHeadingMap.filter((heading) => {
+      return relativeScrollPosition >= heading.relativePagePosition
     })
 
     const activeHeading =
       activeHeadingCandidates.length > 0
         ? activeHeadingCandidates.reduce((prev, current) =>
             prev.offset > current.offset ? prev : current
           )
-        : {}
+        : headings[0] ?? {}
     newActiveIds.push(activeHeading.id)
 
     if (activeHeading.level != 'H2') {
@@ -60,9 +74,9 @@ export function createTocListener(
           ? activeHeadingParentCandidates.reduce((prev, current) =>
               prev.offset > current.offset ? prev : current
             )
-          : {}
+          : null
 
-      if (activeHeadingParent.id) {
+      if (activeHeadingParent?.id) {
         newActiveIds.push(activeHeadingParent.id)
       }
     }