@salesforcedevs/dx-components 1.20.0-rnb-scroll-2 → 1.20.0-rnb-scroll-3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.20.0-rnb-scroll-2",
+    "version": "1.20.0-rnb-scroll-3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/toc/toc.html

@@ -6,7 +6,7 @@
             </div>
             <div
                 class="toc-items"
-                show-bottom-shadow={showBoxShadowBottom}
+                show-bottom-shadow={showBottomShadow}
                 onscroll={handleScroll}
             >
                 <template for:each={options} for:item="option">

package/src/modules/dx/toc/toc.ts

@@ -6,12 +6,16 @@ import { track as sendGtm } from "dxUtils/analytics";
 import { handleScroll } from "dxUtils/handleScroll";
 
 export default class Toc extends LightningElement {
-    showBoxShadow: boolean = false;
-    showBoxShadowBottom: boolean = false;
+    // For showing shadow at the top
+    private showBoxShadow: boolean = false;
     private scrolling: boolean = false;
-    private scrollToBottom: boolean = false;
+
     handleScroll = handleScroll.bind(this);
 
+    // For showing shadow at the bottom
+    private showBottomShadow: boolean = false;
+    private scrollingToTop: boolean = false;
+
     @api header!: string;
 
     @api
@@ -49,20 +53,26 @@ export default class Toc extends LightningElement {
     private showShadowAtBottom = (event: any) => {
         const list = event.target;
 
-        if (!this.scrollToBottom) {
-            this.scrollToBottom = true;
+        if (!this.scrollingToTop) {
+            this.scrollingToTop = true;
             // Set a timeout to handle scroll event after a delay
             setTimeout(() => {
                 const isScrollable = list.scrollHeight > list.clientHeight;
                 const isAtBottom =
                     list.scrollTop + list.clientHeight >=
-                    list.scrollHeight - 75;
+                    list.scrollHeight -
+                        parseInt(
+                            getComputedStyle(
+                                this.template.host
+                            ).getPropertyValue("--dx-c-toc-padding-bottom"),
+                            10
+                        );
 
-                this.showBoxShadowBottom = isScrollable && !isAtBottom;
+                this.showBottomShadow = isScrollable && !isAtBottom;
 
                 // Reset scrolling back to false after handling the scroll
-                this.scrollToBottom = false;
-            }, 100);
+                this.scrollingToTop = false;
+            }, 200);
         }
     };