How to only show customised scrollbar when needed

Question

I got a requirement to customise scrollbar for different browsers on both Window and MacOS.

I have already customised the scrollbar. However, there are 2 issues that I have at the moment

1. The scrollbar always show while I only want it to show when needed (user scrolls or hovers through)

I have set overflow: 'auto' but the issue still persists.

Here's the css part

    ::-webkit-scrollbar {
      width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      border-radius: 10px;
      background: #E6E9EA;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #B9B7BD; 
      border-radius: 10px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #868B8E; 
    }

2. The custom scrollbar doesn't apply for Mozilla Firefox on Window. I have followed this thread Custom CSS Scrollbar for Firefox but it seems that Mozilla only supports width and color for the scrollbar. And even so, it's not working for my case

So if you have any idea, please help

Many thanks