fix: hide empty scrollbar

lifinance · May 27, 2022 · cc2a2fe · cc2a2fe
1 parent ee519d2
commit cc2a2fe
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
@@ -31,7 +31,7 @@ const RelativeContainer = styled(Box)(({ theme }) => ({
 
 const ScrollableContainer = styled(Box)({
   // position: 'fixed',
-  overflowY: 'scroll',
+  overflowY: 'auto',
   height: '100%',
   flex: 1,
   display: 'flex',

diff --git a/packages/widget/src/hooks/useScrollableContainer.ts b/packages/widget/src/hooks/useScrollableContainer.ts
@@ -16,3 +16,17 @@ export const useScrollableContainer = () => {
 
   return containerElement;
 };
+
+export const useScrollableOverflowHidden = () => {
+  useLayoutEffect(() => {
+    const element = document.getElementById(ElementId.ScrollableContainer);
+    if (element) {
+      element.style.overflowY = 'hidden';
+    }
+    return () => {
+      if (element) {
+        element.style.overflowY = 'auto';
+      }
+    };
+  }, []);
+};
diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx
@@ -1,37 +1,23 @@
 import { Box, Container } from '@mui/material';
-import { FC, useLayoutEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import { FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TokenList } from '../../components/TokenList';
-import { useContentHeight } from '../../hooks';
+import { useContentHeight, useScrollableOverflowHidden } from '../../hooks';
 import { SwapFormDirection } from '../../providers/SwapFormProvider';
-import { ElementId } from '../../utils/elements';
 import { ChainSelect } from './ChainSelect';
 import { SearchTokenInput } from './SearchTokenInput';
 
 export const SelectTokenPage: FC<{ formType: SwapFormDirection }> = ({
   formType,
 }) => {
-  const { t } = useTranslation();
   const navigate = useNavigate();
+  useScrollableOverflowHidden();
   const contentHeight = useContentHeight();
 
   const handleTokenClick = () => {
     navigate(-1);
   };
 
-  useLayoutEffect(() => {
-    const element = document.getElementById(ElementId.ScrollableContainer);
-    if (element) {
-      element.style.overflowY = 'hidden';
-    }
-    return () => {
-      if (element) {
-        element.style.overflowY = 'scroll';
-      }
-    };
-  }, []);
-
   return (
     <Container disableGutters>
       <Box pt={1} pb={2} px={3}>