How to make scrollbar transparent which is compatible in all browsers?

Make scrollbar visible in mobile browsers

• 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 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%; }

• Answer:

  Try adding the below to your CSS, note that this is https://bugzilla.mozilla.org/show_bug.cgi?id=77790 https://bugzilla.mozilla.org/show_bug.cgi?id=547260: http://jsfiddle.net/swfour/2nT38/ ::-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; }