为何vue3中滚动条的粗细不生效

Question

以下是我的vue3中模板的代码，滚动条粗细样式已经设置了，而且也没有全局样式。为什么滚动条的粗细一直不变？求解答

<template>
    <el-table :data="tableData" style="width: 100% ;height: 250px;" >
      <el-table-column fixed prop="date" label="Date" width="150" />
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column prop="state" label="State" width="120" />
      <el-table-column prop="city" label="City" width="320" />
    </el-table>
  </template>
  <script  setup>
  const tableData = [
//    此处省略很多很多行数据
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
    }

  ]
  </script>

<style  scoped>
/* 滚动条样式 */
::-webkit-scrollbar {
    width: 45px;
    height: 45px;
}

::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 40px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 40px;
}

.el-table {
  /deep/ .el-table__body-wrapper::-webkit-scrollbar { 
    width: 40px; /* 设置纵向滚动条的宽度 */
    height: 40px; /* 如果有横向滚动条，则设置高度 */
  }
}
 
</style>

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

在 Vue 3 中设置滚动条的样式时，可能会遇到样式不生效的问题。这通常是因为某些样式被覆盖或者浏览器兼容性问题。以下是一些可能的原因和解决方案：

1. 确保选择器优先级足够高：有时候默认样式的优先级比自定义样式高，导致自定义样式没有生效。
2. 检查是否使用了 scoped 样式：scoped 样式仅应用于当前组件内的元素，如果需要全局样式则不要使用 scoped。
3. 确保滚动条存在：如果容器内容不够多，滚动条可能不会显示。
4. 检查是否有其他样式覆盖：查看开发者工具（如 Chrome 的 DevTools）中的样式覆盖情况。

解决方案

1. 移除 scoped 样式

如果你希望这些样式应用于全局，可以移除 scoped 属性。

<style>
/* 滚动条样式 */
::-webkit-scrollbar {
    width: 45px;
    height: 45px;
}

::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 40px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 40px;
}

.el-table {
  .el-table__body-wrapper::-webkit-scrollbar { 
    width: 40px; /* 设置纵向滚动条的宽度 */
    height: 40px; /* 如果有横向滚动条，则设置高度 */
  }
}
</style>

2. 使用更高优先级的选择器

如果你必须使用 scoped 样式，可以尝试增加选择器的优先级。

<style scoped>
/* 滚动条样式 */
::-webkit-scrollbar {
    width: 45px;
    height: 45px;
}

::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 40px;
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 40px;
}

/deep/ .el-table {
  .el-table__body-wrapper::-webkit-scrollbar { 
    width: 40px; /* 设置纵向滚动条的宽度 */
    height: 40px; /* 如果有横向滚动条，则设置高度 */
  }
}
</style>

3. 确保内容足够多以显示滚动条

确保你的表格内容足够多，使得滚动条能够显示出来。

<template>
  <el-table :data="tableData" style="width: 100%; height: 250px;" class="scrollable-table">
    <el-table-column fixed prop="date" label="Date" width="150" />
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="state" label="State" width="120" />
    <el-table-column prop="city" label="City" width="320" />
  </el-table>
</template>

<script setup>
const tableData = [
  // 这里添加更多的数据以确保滚动条出现
];
</script>

<style scoped>
.scrollable-table {
  /deep/ .el-table__body-wrapper::-webkit-scrollbar { 
    width: 40px; /* 设置纵向滚动条的宽度 */
    height: 40px; /* 如果有横向滚动条，则设置高度 */
  }
}
</style>

通过以上步骤，你应该能够解决滚动条样式不生效的问题。如果仍然存在问题，请检查是否有其他样式覆盖或使用浏览器开发者工具进一步调试。