Phonegap Scrollbar

Question

Hi i am trying to get the scrollbar to appear on a phonegap app, but it just won't appear. I have read all the threads there are.

Set these in the CSS stylesheet. I have already read on the thread that you can't set them? Thanks for your time

scrollbar {
    -webkit-appearance: none;
   width: 10px !important;
}

::-webkit-scrollbar {
  width: 10px !important;

}
scrollbar:vertical {
   width: 5px !important;
}
::-webkit-scrollbar:vertical {
     width: 5px !important;
}
scrollbar:horizontal {
  height: 2px !important;
}
::-webkit-scrollbar:horizontal {
     height: 2px !important;
}

scrollbar-thumb {
    background-color:#42c0fb !important;
    border-radius: 5px !important;
     border: 2px solid blue; 
     background-color:blue;
}
::-webkit-scrollbar-thumb {
      background-color:#42c0fb !important;
    border-radius: 5px !important;

}
scrollbar-track {
   border-radius: 5px !important;
    background-color: white !important;
}
::-webkit-scrollbar-track {
   border-radius: 5px !important;
    background-color: white !important;
}

did you try to following: http://stackoverflow.com/a/1202542/2765346 it makes the scrollbar always visible — Hristo Eftimov, Dec 14 '16 at 08:22

Rahi.Shah · Answer 1 · 2017-05-11T12:56:25.173

I was able to accomplish this myself by using Webkit scrollbar CSS that only gets applied on Android. I add the android-scroll-bar class to the page on Android by using

$('html').addClass('android-scroll-bar');

Here is the necessary CSS:

.android-scroll-bar ::-webkit-scrollbar {width: 5px;}

.android-scroll-bar ::-webkit-scrollbar-track { border-radius: 10px;}

.android-scroll-bar ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgb(169,169,169); }

.android-scroll-bar ::-webkit-scrollbar-thumb:window-inactive {background: rgb(128,128,128); }

And for display scrollbar, you have to install Cordova crosswalk plugin. And for PhoneGap, there may be crosswalk plugin also.

I just like to mention, because it can be easily overlooked, but in particular the crosswalk plugin was what did the trick for me. — Allan, Oct 22 '17 at 12:15

Phonegap Scrollbar

1 Answers1