Make scrollbar visible in mobile browsers

Categories:  web
Labels:  html, css

When I have a web page with a scrollable content. With css property overflow:auto or overflow:visible the scrollbar is visible on desktop browsers, but not when I open the page on mobile browsers.

When I open the page on mobile browsers the scrollbar appears only when I try to scroll. Is there a way to make the scrollbar always visible on mobile devices? I have tried some JQuery libraries but none of them have worked. The html code is trivial, I have a scrollable div with an IFrame inside:

<div id="wrapper">
   <iframe id="frameContent" src="mysite" scrollable="yes"></iframe>
</div>

The css:

#wrapper{
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  width: 500px;
  height: 200px;
}

#frameContent{
  width: 100%;
  height: 100%;
} 

Try adding the below to your CSS, note that this is webkit specific:

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

::-webkit-scrollbar:vertical {
  width: 12px;
}

::-webkit-scrollbar:horizontal {
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 10px;
  border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
  border-radius: 10px; 
  background-color: #ffffff; 
}
  • Unfortunately, your JSFiddle does not have the expected behaviour…the scrollbar is not visible What browser are you using?
  • …But the css works with my html page…question solved! Thanks!
  • What about the non-webkit browsers?
  • This solution doesn’t work on Chrome on iOS8. Any other ideas?

Demo Fiddle | Stackoverflow

Related Posts:

Social Profiles

This web accept cryptocoin donations
BTC address, LTC, ETH, DASH, Uphold:
Why donations?