Scroll to the active item when the navbar is too long (#2340)

Co-authored-by: chalin <[email protected]>
Co-authored-by: Phillip Carter <[email protected]>

assets/js/navScroll.js

@@ -0,0 +1,17 @@
+// Check If an Element is Visible in the Viewport
+function isInViewport(element) {
+  const rect = element.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
+let ele = document.querySelector('#td-section-nav .td-sidebar-nav-active-item');
+
+if (ele && !isInViewport(ele)) {
+  ele.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
+}

layouts/partials/hooks/body-end.html

@@ -1 +1,2 @@
 {{ partial "script.html" (dict "src" "js/tracing.js") -}}
+{{ partial "script.html" (dict "src" "js/navScroll.js") -}}