Nebular: The scrollbar on Chrome is very thin (hard to see / scroll)

[maihannijat]

Issue type

I'm submitting a ... (check one with "x")

• [x ] bug report
• [ ] feature request

Issue description

Current behavior:
The scrollbar on Chrome is very thin and light. It's difficult to see and scroll. I have couple of reports from the users complaining about it. They hardly click on the scrollbar and then bring it down or up.

The below is comparison between Chrome and Firefox on the same machine:

The scrollbar on Mac - Chrome is not bad, but it's Windows - Chrome.

Expected behavior:
Visible scrollbar across all browsers.

Other information:

npm, node, OS, Browser
Windsows
Chrome

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

Angular, Nebular

Angular 8 and Nebular 4.

[yggg]

@maihannijat You can control scroll bar parameters for all components via scrollbar-* theme variables:

scrollbar-color:
scrollbar-background-color:
scrollbar-width:

Or for each component individually:

layout-scrollbar-background-color:
layout-scrollbar-color:
layout-scrollbar-width:
card-scrollbar-background-color:
card-scrollbar-color:
card-scrollbar-width:
...

[maihannijat]

@yggg The above properties do not make any difference. I tried both component and global level theme parameters.

[yggg]

You right, I can see the issue. Here is a temporary fix:
If you have withScroll or windowMode modes enabled on nb-layout then:

1. Set desired values for scrollbar-* properties
2. Add the following code into nb-install mixin:

@include nb-install() {
  ...

  ::-webkit-scrollbar {
    width: nb-theme(scrollbar-width) !important;
    height: nb-theme(scrollbar-width) !important;;
  }

  ::-webkit-scrollbar-thumb {
    background: nb-theme(scrollbar-color) !important;
    border-radius: nb-theme(scrollbar-width) / 2 !important;;
  }

  ::-webkit-scrollbar-track {
    background: nb-theme(scrollbar-background-color);
  }
}

If neither withScroll nor windowMode mode enabled on nb-layout then add following code to the global styles (outside nb-install):

::-webkit-scrollbar {
  width: <desired-width> !important;
  height: <desired-width> !important;;
}

::-webkit-scrollbar-thumb {
  background: <desired-thumb-color> !important;
  border-radius: <desired-width> / 2 !important;;
}

::-webkit-scrollbar-track {
  background: <desired-track-color>;
}