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

回答1:

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

回答2:

  /* !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