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>

The css:

  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  width: 500px;
  height: 200px;

  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

Alvistec spanish
Plan Alvistec in Youtube
Privacy policy

This web site uses third's cookies and the Google's cookies to offer services, personalize ads and analyze traffic (Google analytics).
The information on the use of the this web site is shared with Google and another ads provider platforms. When you using this web site, you accept cookies use.
See more about the Cookies

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