CODEWITHSUNDEEP
htmlcss
Lutis
Lutis

Reputation: 31

How to hide scrollbar on mobile browser?

I have tried this:

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

::-webkit-scrollbar {
            width: 0px;
            display: none; /* Safari and Chrome */
        }

And it works well on the common PC Browser but when it changes to mobile it doesn't work

Upvotes: 1

Views: 2653

Answers (2)

mehdi musavi
mehdi musavi

Reputation: 418

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

body{
  height: 1000vh
}

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

Upvotes: 1

Lutis
Lutis

Reputation: 31

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

Upvotes: 2

Related Questions