refactor(scrollbar): do not custom scrollbar on mobile

Author: mydearxym

components/Hooks/usePlatform.js

@@ -10,6 +10,7 @@ const inialPlatform = {
   isIE: false,
   isEdge: false,
   isMacOS: false,
+  isMobile: false,
 }
 
 // see https://stackoverflow.com/questions/49328382/browser-detection-in-reactjs/49328524
@@ -44,6 +45,8 @@ const usePlatform = (/* { breakpoint } */) => {
     const isMacOS = Global.navigator.appVersion.indexOf('Mac') != -1
     /* eslint-enable */
 
+    const isMobile = Global.innerWidth <= 800 && window.innerHeight <= 600
+
     setPlatform(
       R.merge(inialPlatform, {
         isFirefox,
@@ -52,6 +55,7 @@ const usePlatform = (/* { breakpoint } */) => {
         isEdge,
         isChrome,
         isMacOS,
+        isMobile,
       })
     )
 

containers/ThemeWrapper/GlobalStyle.js

@@ -139,8 +139,8 @@ const GlobalStyle = createGlobalStyle`
     color: ${theme('searchHighlight.doramonFg')};
   }
 
-  ${({ isMacOS }) =>
-    isMacOS ||
+  ${({ showCustomScrollbar }) =>
+    showCustomScrollbar ||
     css`
       ::-webkit-scrollbar {
         background: transparent;

containers/ThemeWrapper/index.js

@@ -17,9 +17,8 @@ import AntUIOverWrite from './AntUIOverWrite'
 import GlobalStyle from './GlobalStyle'
 
 const ThemeContainer = ({ children, theme: { themeData } }) => {
-  const { isMacOS } = usePlatform()
-
-  console.log('isMacOS: ', isMacOS)
+  const { isMacOS, isMobile } = usePlatform()
+  const showCustomScrollbar = !isMacOS || !isMobile
 
   return (
     <ThemeProvider theme={themeData}>
@@ -30,7 +29,7 @@ const ThemeContainer = ({ children, theme: { themeData } }) => {
         <div>{children}</div>
         <CodeSyxHighlight />
         <AntUIOverWrite />
-        <GlobalStyle isMacOS={isMacOS} />
+        <GlobalStyle showCustomScrollbar={showCustomScrollbar} />
       </React.Fragment>
     </ThemeProvider>
   )