Vuetify 自定义滚动条答案

【问题标题】：Vuetify Custom ScrollbarVuetify 自定义滚动条
【发布时间】：2018-04-19 21:15:47
【问题描述】：

我为 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 制作任何自定义滚动条？谢谢你

【问题讨论】：

你最终找到工作了吗？
@WildanMaulanaSyahidillah，请看下面的答案。

标签： vue.js vuetify.js

【解决方案1】：

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

变化：

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

css：

.vuebar-element  {
    height: 100%;

【讨论】：

感谢@user1852788 的回答
从库列表中删除 vue 是什么意思？
vue 库有双重包含：在 html 部分和“设置->Javascript->外部脚本/笔”中
我已经尝试了所有这些......但它所做的只是删除默认滚动条

【解决方案2】：

我是直接修改源代码。

路径下：
node_modules\vuetify\src\components\VNavigationDrawer

//directly modify the scrollbar style you want.
.v-navigation-drawer__content
  height: 100%
  overflow-y: auto
  overflow-x: hidden !important
  &::-webkit-scrollbar
    width: 1px                                        
  &::-webkit-scrollbar-thumb
    background: black                                 
    border-radius: 20px

【讨论】：

.v-navigation-drawer__content height: 100% overflow-y: auto overflow-x: hidden !important &::-webkit-scrollbar width: 1px &::-webkit-scrollbar-thumb 背景：黑色边框半径：20px

【解决方案3】：

老实说，不要给自己压力。只使用 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>

【讨论】：