Vuetify 自定义滚动条

Question

我为 Vuetify 尝试了不同的自定义滚动条但失败了。这是我试过的其中一个（我试过 v-navigation-drawer ）

Vuejs 自定义滚动条 https://github.serafin.io/vuebar/#installation

Vuejs 自定义滚动条工作示例 https://jsfiddle.net/u94ns8jc/1/?utm_source=website&utm_medium=embed&utm_campaign=u94ns8jc

Vuetify 示例不起作用 https://codepen.io/kiranvasi/pen/jxEJqB

   <v-navigation-drawer
      :mini-variant.sync="miniVariant"
      :clipped="clipped"
      v-model="drawer"
      fixed
      app  v-bar
      class="el1"
   >

如果你们能够为 Vuetify 制作任何自定义滚动条，谁能告诉我吗？谢谢你

原文由 Bujji 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

https://codepen.io/anon/pen/gBMjBM

变化：

• 将“v-list”（导致溢出的元素）包装到您的 v-bar 元素中
• 从库列表中删除了 vue
• css 中的一行

CSS:

 .vuebar-element  {
    height: 100%;

原文由 user1852788 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

老实说，不要给自己压力。只使用 CSS，让自己休息一下

查看小提琴 https://jsfiddle.net/L3d2tspy/

 <style>
  /* width */
  ::-webkit-scrollbar {
    width: 5px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #ff2929;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(255, 219, 219);
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
</style>

原文由 DAVID AJAYI 发布，翻译遵循 CC BY-SA 4.0 许可协议