@salesforcedevs/dx-components 1.18.9-rnb-scroll1 → 1.18.9-rnb-scroll2

package/package.json

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

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

@@ -38,10 +38,10 @@
 }
 
 .toc-items {
-    max-height: calc(100vh - 200px);
     overflow-y: auto;
-    padding-bottom: 100px;
+    padding-bottom: 80px;
     padding-right: 10px;
+    scroll-behavior: smooth;
 }
 
 .dx-text-display-8 {

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

@@ -3,11 +3,12 @@ import cx from "classnames";
 import { ContentElement } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { track as sendGtm } from "dxUtils/analytics";
-import { handleScroll } from 'dxUtils/handleScroll';
+import { handleScroll, makeListContainerScrollable } from 'dxUtils/handleScroll';
 
 export default class Toc extends LightningElement {
     showBoxShadow: boolean = false;
     handleScroll = handleScroll.bind(this);
+    makeListContainerScrollable = makeListContainerScrollable.bind(this);
 
     @api header!: string;
 
@@ -42,6 +43,10 @@ export default class Toc extends LightningElement {
 
     @track _options!: Array<ContentElement>;
 
+    renderedCallback() {
+        this.makeListContainerScrollable(".toc-items");
+    }
+
     private onClick(e: Event) {
         const target = e.currentTarget as HTMLElement;
         const id = target.getAttribute("contentid");

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

@@ -1,7 +1,20 @@
 export function handleScroll(this: any, scrollEvent: any) {
-  const list = scrollEvent.target;
-  
-  setTimeout(() => {
-    this.showBoxShadow = (list.scrollTop > 0 && list.scrollHeight > list.clientHeight);
-  }, 200);
+	const list = scrollEvent.target;
+	
+	setTimeout(() => {
+		this.showBoxShadow = (list.scrollTop > 0 && list.scrollHeight > list.clientHeight);
+	}, 200);
+}
+
+export function makeListContainerScrollable(this: any, classname: string) {
+	const rnbList = this.template.querySelector(classname);
+
+	if(rnbList) {
+		const rect = rnbList?.getBoundingClientRect();
+		const distanceFromTop = rect?.top || 0;
+		const viewportHeight = window.innerHeight;
+		const maxHeight = viewportHeight - distanceFromTop;
+
+		rnbList.style.maxHeight = `${maxHeight}px`;
+	}
 }