Cannot style scrollbar on chrome

[lincolnthree]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

CSS cannot be applied to style component overflow scrollbar appearance.

This leads to scrollbars for PWAs that cannot be styled to match the theme of the application:

Expected behavior:
We should be able to style scrollbars using CSS. https://css-tricks.com/custom-scrollbars-in-webkit/

Steps to reproduce:
Just display any starter app in a web browser (not in mobile emulation mode), and resize the window to cause overflow. The scrollbar will appear and cannot be re-styled.

Related code:

The following CSS should style ALL scrollbars in the application. I've tried a variety of permutations of this to no avail.

  :root * {
    &::-webkit-scrollbar {
      width: 12px;
    }

    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      -webkit-border-radius: 10px;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
      -webkit-border-radius: 10px;
      border-radius: 10px;
      background: rgba(255, 0, 0, 0.8);
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

    &::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(255, 0, 0, 0.4);
    }
  }

https://stackblitz.com/edit/ionic-v4-z4czrb?file=src%2Fglobal.scss

Other information:
This issue has been alluded to or reported in the incorrect place a number of times. Here are a few:

ionic-team/ionic-v3#737
#17608

Ionic info:

Lincolns-MacBook-Pro-2:topdecked-unified lincoln$ ionic info

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.13.1
   @angular-devkit/schematics    : 7.3.1
   @angular/cli                  : 7.3.1
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v11.2.0 (/usr/local/Cellar/node/11.2.0/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[LakshanKarunathilake]

I am also facing the same issue. I see this issue is still open can you please look into that

[IvanMurabito]

same issue here...im not able to change the style of scrollbar.

[lincolnthree]

I still have not found any solution or workaround for this, other than not using Ionic.

[rokkapun]

I looked all over and there is no real solution to this UGLY problem.
Although on Mac scrollbars are thin and transparent and look ok. But look in chrome on windows is horrendous. I have 2 sidebars in my PWA and pretty complex navigation. I solved everything else (including split-pane behaviour which is too much mobile-centric), but can't find solution to this.
Please look into that issue.

[ldittel]

The issue is that ion-content is a custom component and it does not take the scrollbar style. There's an easy fix - put all of your content within a div (that is a direct child of ion-content), stretch it to take all the space of the parent ion-content and make it scrollable (by giving it eg. overflow: auto). This div WILL be styleable. It's not the cleanest but it is a solution, super simple and works like a charm.

…

On Thu, 30 May 2019, 08:44 rokkapun, ***@***.***> wrote: I looked all over and there is no real solution to this UGLY problem. Although on Mac scrollbars are thin and transparent and look ok. But look in chrome on windows is horrendous. I have 2 sidebars in my PWA and pretty complex navigation. I solved everything else (including split-pane behaviour which is too much mobile-centric), but can't find solution to this. Please look into that issue. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#17685>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AELGL2NSJJQT6ZVK7D5EGV3PX6AUNANCNFSM4G33SQPQ> .

[danielsotopino]

@ldittel This did the trick for me:
Right below ion-content
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">

[lincolnthree]

@danielsotopino Thanks for this idea! Can you provide a little more context? Wouldn't a 100vh container cause some overflow of its own if the page has a header, etc? Where did you put this div? Inside or outside of ion-content?

[danielsotopino]

@lincolnthree

<ion-content>
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>

[lincolnthree]

@danielsotopino Thanks, that makes sense. It works, but I think it also breaks <ion-infinite-scroll> :( Have you gotten the two to work together?

E.g. If everything is wrapped in the scroll-container div, ion-infinite-scroll never fires its event. I'm thinking it is bound to ion-content's scroll area.