title: Custom scrollbar on v-data-table
body: <p>I try to change style on v-data-table (vuetify). This code changes scrolls on all places (browser scrolls too).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
  ::-webkit-scrollbar {
      width: 24px;
      height: 8px;
      background-color: #143861;
  }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I change scroll style for a specific element? These solutions don't work:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
  #element::-webkit-scrollbar {
      width: 24px;
      height: 8px;
      background-color: #143861;
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;v-data-table
            :headers="headers"
            :items="items"
            item-key="id"
            id="element"
          &gt;
          &lt;/v-data-table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
  .element::-webkit-scrollbar {
      width: 24px;
      height: 8px;
      background-color: #143861;
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;v-data-table
            :headers="headers"
            :items="items"
            item-key="id"
            class="element"
          &gt;
          &lt;/v-data-table&gt;</code></pre>
  </div>
  </div>
  </p>