fix(toc): scroll position and slide

ariellalgilmore · Sep 13, 2023 · 6746534 · 6746534
1 parent da08ad1
commit 6746534
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
@@ -430,15 +430,15 @@ $hover-transition-timing: 95ms;
   :host(#{$c4d-prefix}-table-of-contents[toc-layout='horizontal'])
     .#{$prefix}--tableofcontents-container {
     position: relative;
-    overflow: hidden;
+    overflow: scroll;
     height: $spacing-09;
   }
 
   :host(#{$c4d-prefix}-table-of-contents)
     .#{$prefix}--tableofcontents-container {
     @include breakpoint-down(lg) {
       position: relative;
-      overflow: hidden;
+      overflow: scroll;
       height: $spacing-09;
     }
   }

diff --git a/packages/web-components/src/components/table-of-contents/table-of-contents.ts b/packages/web-components/src/components/table-of-contents/table-of-contents.ts
@@ -133,6 +133,9 @@ class C4DTableOfContents extends MediaQueryMixin(
   @queryAll(`.${prefix}--tableofcontents__item`)
   private _itemNodes?: HTMLElement[] = [];
 
+  @query(`.${prefix}--tableofcontents__content`)
+  private _contentDiv?: HTMLElement;
+
   @query(`.${prefix}--tableofcontents__navbar`)
   private _navBar?: HTMLElement;
 
@@ -410,7 +413,13 @@ class C4DTableOfContents extends MediaQueryMixin(
       if (currentY > elem.offsetTop && masthead) {
         targetY = elem.offsetTop - masthead.offsetHeight;
       } else {
-        targetY = elem.offsetTop;
+        targetY =
+          elem.offsetTop -
+          parseInt(
+            window
+              .getComputedStyle(this._contentDiv!)
+              .getPropertyValue('padding-top')
+          );
       }
 
       window.scrollTo(0, targetY);