Style chakra-ui mobile scrollbar and make always visible

In Chakra UI, you can customize the mobile scrollbar appearance and make it always visible using CSS. To achieve this, you need to target the scrollbar elements and set the desired styles. Additionally, for mobile devices, you can use media queries to ensure the scrollbar visibility is applied only on smaller screens.

Here's how you can style the mobile scrollbar and make it always visible in Chakra UI:

1. Enable Scrollbar Visibility: By default, the scrollbar may be hidden when not in use on some devices. To ensure it's always visible, use the following CSS:

   cssCopy code
   /* Apply scrollbar styles to the entire document */
   body::-webkit-scrollbar {
     width: 8px;
   }
   
   /* Track styles (background) */
   body::-webkit-scrollbar-track {
     background: #f1f1f1;
   }
   
   /* Thumb styles (scrollbar handle) */
   body::-webkit-scrollbar-thumb {
     background: #888;
   }
   
   /* Corners styles (not visible but can be customized) */
   body::-webkit-scrollbar-corner {
     background: #f1f1f1;
   }
   

2. Apply Styles Using Chakra UI: In Chakra UI, you can create a custom CSS class and apply the scrollbar styles to it. To do this, you can use the CSS utility component.

   jsxCopy code
   import { CSS } from '@chakra-ui/react';
   
   const CustomScrollbarStyles = () => (
     <CSS>
       {`
         /* Add your custom scrollbar styles here */
         /* For example: */
         body::-webkit-scrollbar {
           width: 8px;
         }
   
         body::-webkit-scrollbar-track {
           background: #f1f1f1;
         }
   
         body::-webkit-scrollbar-thumb {
           background: #888;
         }
   
         body::-webkit-scrollbar-corner {
           background: #f1f1f1;
         }
       `}
     </CSS>
   );
   

3. Apply Scrollbar Styles on Mobile Devices Only: To ensure that the scrollbar styles are applied only on mobile devices, you can use media queries.

   jsxCopy code
   import { CSS } from '@chakra-ui/react';
   
   const CustomScrollbarStyles = () => (
     <CSS>
       {`
         /* Apply scrollbar styles to the entire document on mobile devices */
         @media screen and (max-width: 768px) {
           body::-webkit-scrollbar {
             width: 8px;
           }
   
           body::-webkit-scrollbar-track {
             background: #f1f1f1;
           }
   
           body::-webkit-scrollbar-thumb {
             background: #888;
           }
   
           body::-webkit-scrollbar-corner {
             background: #f1f1f1;
           }
         }
       `}
     </CSS>
   );
   

4. Render the Custom Styles Component: Finally, include the CustomScrollbarStyles component in your app's layout or at the root level to apply the scrollbar styles.

   jsxCopy code
   import React from 'react';
   import { ChakraProvider, CSSReset } from '@chakra-ui/react';
   import CustomScrollbarStyles from './CustomScrollbarStyles';
   
   const App = () => {
     return (
       <ChakraProvider>
         <CSSReset />
         <CustomScrollbarStyles />
         {/* Rest of your app */}
       </ChakraProvider>
     );
   };
   
   export default App;
   

With these steps, you should have a custom-styled scrollbar on mobile devices, and it will be always visible. Adjust the styles as needed to fit your app's design and branding.