'Is possible to hide scrollbar on mobile for webpage?

I'm trying hide scrollbar on mobile. Everything looks well on desktop (no srollbar), but when I check on some android device (ipad) - I can still see grey, thin thumb. Is possible to hide predefined scrollbar from browser.

My code (work well on desktop).

body::-webkit-scrollbar {
  background-color: #fff;
}

body::-webkit-scrollbar-thumb {
  background-color: #fff;
}
htmlcssmobilescrollbar


Solution 1:[1]

Try this 
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}

Solution 2:[2]

Use -webkit-appearance:none to hide the scrollbar. 

::-webkit-scrollbar {
    -webkit-appearance: none;
}

Solution 3:[3]

This was useful for me.

::-webkit-scrollbar { display: none; }

Solution 4:[4]

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

body{
  height: 1000vh
}

@media screen and (max-width: 768px){
  ::-webkit-scrollbar {
      -webkit-appearance: none;
  }
}
<p>Yao</p>

Solution 5:[5]

None of the previous answers worked for me. I had to add:

main {
  overflow: hidden;
}

Then on mobile view through the browser there was no scroll bar to the right, but the scroll functionality still works.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 gowtham rajan
Solution 2 Nimitt Shah
Solution 3 MichalCh
Solution 4 Sarout
Solution 5 toinhao

Related Questions