How to hide scrollbar on mobile browser?

Finally I did it according to this: scrollable div inside container

By making 3 div container the scrollbar will inside the middle div

I set the body

height: 100%;
overflow: hidden;

the outside div

height:screen.availHeight //this just a fake code I use blazor to do this
overflow: hidden;
box-sizing: border-box;

This make sure there will be a fixed height box for the content and the scrollbar will not show at the right of the page when the content height overflow

Then the middle div

overflow: scroll

when the height of the content in the inside div overflow,there will be a scrollbar inside the middle div

and by setting this

html, body {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
::-webkit-scrollbar {
    display: none;/* Safari and Chrome */
}

the scrollbar will be hide both on pc and mobile

try this hide's it on screens less than 375px

body{
  height: 1000vh
}

@media screen and (max-width: 375px){
     ::-webkit-scrollbar {
     -webkit-appearance: none;
   }
}