Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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%;
} 
like image 724
user3098549 Avatar asked Apr 07 '14 08:04

user3098549


People also ask

How do I make my scrollbar visible?

Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used.


3 Answers

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

Demo Fiddle

::-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;
}
like image 166
SW4 Avatar answered Oct 22 '22 19:10

SW4


  /* !important is needed sometimes */
 ::-webkit-scrollbar {
    width: 12px !important;
 }

 /* Track */
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
   background: #41617D !important; 
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 

 }
 ::-webkit-scrollbar-thumb:window-inactive {
   background: #41617D !important; 
 }

Add this css code - It will change the style of scrollbar in mobile devices only

like image 15
pradeep raj t Avatar answered Oct 22 '22 21:10

pradeep raj t


For issues with Safari, IOS browsers,

Setting

-webkit-overflow-scrolling: auto

along with mentioned CSS above in other ::-webkit-scrollbar solutions here, works well

like image 5
Sasi Kumar M Avatar answered Oct 22 '22 21:10

Sasi Kumar M