@salesforcedevs/dx-components 1.18.9-rnb-scroll4 → 1.18.9-rnb-scroll5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.18.9-rnb-scroll4",
+    "version": "1.18.9-rnb-scroll5",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/toc/toc.css

@@ -43,6 +43,19 @@
     padding-right: 10px;
 }
 
+.scroll-shadow {
+  position: sticky;
+  bottom: -80px;    /* toc-items are 80px padding from bottom */
+  height: 5px;
+  background: linear-gradient(
+    to bottom,
+    rgba(229, 229, 229, 0),
+    rgba(229, 229, 229, 0.8)
+  );
+  transition: opacity 0.3s;
+  opacity: 0;
+}
+
 .dx-text-display-8 {
     padding-top: var(--dx-g-spacing-sm);
     transition: var(--dx-g-transition-hue-1x);

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

@@ -17,6 +17,7 @@
                         {option.label}
                     </a>
                 </template>
+                <div class="scroll-shadow"></div>
             </div>
         </div>
     </div>

package/src/modules/dxUtils/handleScroll/handleScroll.ts

@@ -1,7 +1,17 @@
 export function handleScroll(this: any, scrollEvent: any) {
-	const list = scrollEvent.target;
+	const { scrollTop, scrollHeight, clientHeight } = scrollEvent.target;
+
+	// to show shadow box at bottom of list container
+	const shadow = this.template.querySelector(".scroll-shadow");
+
+	if(shadow) {
+		const isScrollable = scrollHeight > clientHeight;
+		const isAtBottom = scrollTop + clientHeight >= scrollHeight - 75;	//to maintain the padding 80px given to toc-items
+
+		shadow.style.opacity = (isScrollable && !isAtBottom) ? 1 : 0;
+	}
 	
 	setTimeout(() => {
-		this.showBoxShadow = (list.scrollTop > 0 && list.scrollHeight > list.clientHeight);
+		this.showBoxShadow = (scrollTop > 0 && scrollHeight > clientHeight);
 	}, 200);
 }