去掉el-scrollbar的横向滚动条，只展示纵向滚动条

可以使用以下 CSS 样式来去掉横向滚动条，只展示纵向滚动条：

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

其中，`::-webkit-scrollbar` 用于设置滚动条的宽度和高度，`::-webkit-scrollbar-thumb` 用于设置滚动条的样式，`::-webkit-scrollbar-track` 用于设置滚动条的背景色。

相关问题

el-tree设置滚动条

要为el-tree设置滚动条，可以根据不同的需求选择不同的方法。根据引用\[1\]，可以通过设置外层父级div的宽高，以及设置el-scrollbar和el-tree的样式来实现纵向滚动条。具体的样式设置如下：

.dir-tree {
  width: 360px;
  height: 800px;
}

.el-tree {
  min-width: 100%;
  display: inline-block !important;
}

.el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}

如果需要横向滚动条，可以参考引用\[2\]的方法。给el-tree添加一个class，例如"flow-tree"，然后在样式中添加如下样式：

.flow-tree {
  width: 100%;
  overflow: scroll;
}

.flow-tree > .el-tree-node {
  display: inline-block;
  min-width: 100%;
}

如果你使用的是el-tree组件的话，可以直接在el-tree标签上添加class，如下所示：

<el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all show-checkbox :filter-node-method="filterNode" />

然后在样式中添加如下样式：

.filter-tree {
  overflow: auto;
}

:deep(.el-tree-node > .el-tree-node__children) {
  overflow: visible;
}

这样就可以为el-tree设置滚动条了。
#### 引用[.reference_title]
- *1* [element-ui tree加滚动条](https://blog.csdn.net/hbh112233abc/article/details/118359656)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [el-tree加滚动条的方法](https://blog.csdn.net/qq_38110274/article/details/122251743)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [el-tree 解决横向滚动条和纵向滚动条问题](https://blog.csdn.net/IT_iosers/article/details/126400762)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

el-table横向列表

引用中提到了在Vue中使用el-table时，如果设置了表格的高度和宽度，但是表格内容超出了宽度，横向滚动条没有显示，无法拖动。可以通过设置滚动条的宽度和高度以及样式来解决这个问题。具体的解决方法如下：
1. 设置滚动条宽度和高度：
在样式中添加以下代码：
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 20px; /* 横向滚动条 */
height: 8px; /* 纵向滚动条 必写 */
}
其中，width表示横向滚动条的宽度，height表示纵向滚动条的高度，必须设置。

2. 设置滚动条样式：
在样式中添加以下代码：
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #dde; /* 滚动条背景颜色 */
border-radius: 3px; /* 滚动条圆角 */
}
其中，background-color表示滚动条的背景颜色，border-radius表示滚动条的圆角大小。

这样就可以解决el-table横向列表超出宽度的问题了。