Make scrollbar visible in mobile browsers

Question

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 t

Answer 1

For issues with Safari, IOS browsers,

Setting

-webkit-overflow-scrolling: auto

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

Answer 2

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

Answer 3

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