为何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中，如果你使用的是ELEMENTUI库，并且你设置了一个SCROLLBAR-THICK属性来控制滚动条的宽度，那么这个属性应该被用于改变元素的高度而不是宽度。这会导致滚动条的粗细始终是相同的，因为元素的高度不会随滚动条的大小变化而变化。

解决这个问题的方法是：

1. 将SCROLLBAR-THICK属性更改为SCROLLBAR-THIN或SCROLLBAR-THICKNESS。
2. 在CSS中为元素添加一个类名，例如SCROLLBAR-THICK或SCROLLBAR-THICK。
3. 使用WIDTH属性将滚动条的实际宽度转换为SCROLLBAR-THICK。

以下是修改后的HTML和CSS代码示例：

<TEMPLATE>
  <EL-TABLE :DATA="TABLEDATA">
    <EL-TABLE-COLUMN PROP="NAME" LABEL="NAME" WIDTH="180PX"></EL-TABLE-COLUMN>
    <EL-TABLE-COLUMN PROP="AGE" LABEL="AGE" WIDTH="180PX"></EL-TABLE-COLUMN>
    <!-- ... -->
  </EL-TABLE>
</TEMPLATE>

<SCRIPT>
EXPORT DEFAULT {
  DATA() {
    RETURN {
      TABLEDATA: [
        { NAME: "ALICE", AGE: 30 },
        { NAME: "BOB", AGE: 40 }
      ]
    };
  }
};
</SCRIPT>

在这个例子中，我们删除了SCROLLBAR-THICK属性并将其替换为SCROLLBAR-THICK或SCROLLBAR-THICK。这样可以确保元素的宽度与滚动条的宽度保持一致，从而实现滚动条的粗细改变。