Vaadin-grid: Change scrollbar style

[sudipta1411]

Is there any way to change the style of the scrollbar that is displayed on vaadin-grid?
Current my code looks something like this

<style>
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
</style>
<vaadin-grid id="style-2"></vaadin-grid>

But nothing happens. It just shows the default scrollbar.

[web-padawan]

The scrollbars are present not in the vaadin-grid itself but on the component in its shadow DOM, and we do not have it exposed as shadow part, as it is considered an implementation detail. We need to apply some styles on it to ensure scrolling works as intended.

The CSS scrollbar styling feature is still unofficial, only supported by Chrome and Safari so it's unlikely that we add some tricks for this purpose at this point.

[jouni]

AFAIK you should be able to style the scrollbars at least in Safari and Chrome by adding styles for ::-webkit-scrollbar { ... } using <dom-module theme-for="vaadin-grid" id="...">. I believe it’ll cascade down to the contained scrollable elements.

See https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar for all the pseudo elements.

[krumware]

@sudipta1411 We just tried the same, and can confirm this works if you don't place the ::-webkit-scrollbar after a particular ID selector.

[sarahmadison]

Yep, this worked well!

<dom-module id="classic-vaadin-grid" theme-for="vaadin-grid">
  <template>
    <style>
      :host {
        background-color: var(--framework-background-color);
      }

      /* Scrollbar width */
      ::-webkit-scrollbar {
          width: 8px;
      }

      /* Scrollbar track */
      ::-webkit-scrollbar-track {
          display: none;
      }

      /* Scrollbar handle */
      ::-webkit-scrollbar-thumb {
          background: var(--active-background-color); 
          border-radius: 10px;
      }

      [part~="cell"] {
        color: var(--primary-text-color);
      }

[hari2m]

Is there a way to do it in the component where we use the vaadin-grid? I am using the vaadin-grid inside a litelement and any changes I try does not reflect to the grid component.

<styles>
.scrollers::-webkit-scrollbar {
    width: 5px;
    background-color: #aaa; /* or add it to the track */
}
     .scrollers::-webkit-scrollbar-thumb {
    background: #000; 
}
</styles>
<vaadin-grid class="scrollers">
    ---code to render columns---
</vaadin-grid>

The above code is not updating my scroll bars with the given styles.

[web-padawan]

The above code has no effect on the grid because the scrollbars are on the internal component.

You can use the following code:

import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';

registerStyles('vaadin-grid', css`
  ::-webkit-scrollbar {
    width: 5px;
    background-color: #aaa;
  }

  ::-webkit-scrollbar-thumb {
    background: #000; 
  }
`);

[hari2m]

That worked. Thanks.