Android: Webview - how to fade out scrollbar / scrollbar over content

Questions
1

Dear all,

I am using the same js/css code for iOS / Android.

In iOS a scrollbar is shown in case the content exceed the actual size of the page. In Android there is unfortunately no scrollbar.
Can be fixed by some CSS Code:

.page-content::-webkit-scrollbar {
    width: 4px;
    border-radius: 6px;
}
.page-content::-webkit-scrollbar-track {
    background-color: transparent;
} 
.page-content::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 6px;
}
.page-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

But:

  • the scrollbar does not fade out in case of no activity
  • it is not above the content but needs some space on the right side.

The webview is created/configured as follows:

...
webView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(true);
....

Target would be: Scrollbar is above the content & is only visible in case of scrolling.

Many thanks & best regards
Andreas