Use mobile scrollbar in Polymer

Question

I am working in a demo using Polymer and when I access the app using the browser (Google Chrome for Desktop) the scrollbar are very ugly.

I was searching for a alternative scrollbar and found a good example using only CSS: https://stackoverflow.com/a/22907848

How can I use this CSS inside my core-scaffold element?

Answer 1

to target elements in the shadow DOM, prefix your css with

html /deep/

so to target all scrollbars on your site (in webkit browsers like Chrome)

  html /deep/ {
    ::-webkit-scrollbar-track {
      background:white;
    }

    ::-webkit-scrollbar {
      width: 7.5px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: lightgrey; //fallback
      background-color: rgba(26, 26, 26, 0.25);
    }
  }

if you just want to target core-scaffold you can use

  html /deep/ core-scaffold {
    ::-webkit-scrollbar-track {
      background:white;
    }

    ::-webkit-scrollbar {
      width: 7.5px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: lightgrey; //fallback
      background-color: rgba(26, 26, 26, 0.25);
    }
  }

or within the style tags of a custom element (to style only that element)

  :host {
    ::-webkit-scrollbar-track {
      background:white;
    }

    ::-webkit-scrollbar {
      width: 7.5px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: lightgrey; //fallback
      background-color: rgba(26, 26, 26, 0.25);
    }
  }

this answer covers more on shadow DOM styling

you can also use core-style for polymer elements