12

Is there a way to keep the scrollbars always visible in mobile browser. By default a scrollable page get its scroll visible only when a touch/swipe is happening. How can I make the scrollbars always visible ?

Jagadeesh J
  • 1,211
  • 3
  • 11
  • 16
  • Many mobile browsers don't show scrollbars at all, while some show them only while scrolling. So no matter what you put in your CSS,thing you want to achieve might be impossible. – Richa Sep 05 '14 at 11:16
  • @Richa are you sure. Is there any documentation for that. I can simply show that to client and stop trying the impossible – Jagadeesh J Sep 05 '14 at 11:19
  • Do you want it for all mobile browser only in mobile devices?? For PC browser you can do `html {overflow-y:scroll;}` – Richa Sep 05 '14 at 11:22
  • @Richa, I need it for mobile.. There is a table and it will not show scrollbar for Large screen. The same will be scrollable in medium/small screens. Everything is perfect but I want to show the scroller always – Jagadeesh J Sep 05 '14 at 11:24
  • Check this http://stackoverflow.com/questions/22907777/make-scrollbar-visible-in-mobile-browsers – Richa Sep 05 '14 at 11:26

1 Answers1

22

Try this one on your css styles 

::-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; 
}
user2169710
  • 399
  • 1
  • 3
  • 8