fix: calc scrollheight dynamically for tabs change

src/pages/_components/column-wrapper/index.tsx

@@ -22,14 +22,20 @@ const ColumnWrapper: React.FC<ColumnWrapperProps> = ({
   styles = {}
 }) => {
   const scroller = React.useRef<any>(null);
-  const { initialize, instance, scrollToBottom, scrollToTarget } =
-    useOverlayScroller({
-      options: {
-        scrollbars: {
-          autoHide: 'move'
-        }
+  const {
+    initialize,
+    instance,
+    scrollEventElement,
+    scrollToBottom,
+    scrollToTarget,
+    getScrollElementScrollableHeight
+  } = useOverlayScroller({
+    options: {
+      scrollbars: {
+        autoHide: 'move'
       }
-    });
+    }
+  });
 
   React.useEffect(() => {
     if (scroller.current) {
@@ -39,7 +45,14 @@ const ColumnWrapper: React.FC<ColumnWrapperProps> = ({
 
   return (
     <WrapperContext.Provider
-      value={{ osInstance: instance, scrollToBottom, scrollToTarget }}
+      value={{
+        scroller: scroller,
+        osInstance: instance,
+        scrollEventElement,
+        getScrollElementScrollableHeight,
+        scrollToBottom,
+        scrollToTarget
+      }}
     >
       <div
         className="column-wrapper-footer"

src/pages/_components/column-wrapper/use-wrapper-context.ts

@@ -2,8 +2,14 @@ import { createContext, useContext } from 'react';
 
 interface WrapperContextProps {
   osInstance?: any;
+  scroller?: any;
+  scrollEventElement?: any;
   scrollToBottom?: () => void;
   scrollToTop?: () => void;
+  getScrollElementScrollableHeight?: () => {
+    scrollHeight: number;
+    scrollTop: number;
+  };
   scrollToTarget?: (target: any, offset?: number) => void;
 }