如何让el-main内容溢出时可以滚动，并隐藏滚动条

今天用vue3写项目时用element-plus时遇到了一个问题，el-main里面的内容溢出了但是窗口不能滚动，而且设计的样式滚动时滚动条时隐藏的，到处查阅后折腾了好久终于把样式写好了。在这里分享给大家，避免大家踩坑。

要实现el-main内容溢出时可以滚动并隐藏滚动条，你可以使用CSS中的overflow: auto属性来显示滚动条，并通过CSS样式来隐藏滚动条。以下是一种实现方法：

<style>
  :deep(.el-main){
  height: 800px;
  overflow: auto;
  scrollbar-width: thin; /* 定义滚动条的宽度 */
  scrollbar-color: transparent transparent; /* 定义滚动条的颜色 */
}

  /* 隐藏滚动条 */
  :deep(.el-main::-webkit-scrollbar) {
    width: 8px; /* 定义滚动条宽度 */
    height: 8px;
    background-color: transparent; /* 滚动条背景颜色 */
  }

  :deep(.el-main::-webkit-scrollbar-thumb) {
    background-color: transparent; /* 滚动条滑块颜色 */
    border-radius: 4px; /* 滚动条滑块圆角 */
  }

  :deep(.el-main::-webkit-scrollbar-thumb:hover) {
    background-color: rgba(0, 0, 0, 0.2); /* 鼠标悬停时滚动条滑块颜色 */
  }
</style>

<div class="el-main">
  <!-- 这里的内容将溢出容器 -->
  <!-- 当内容超过容器尺寸时，会显示滚动条 -->
  <!-- 滚动条会被隐藏，但用户仍然可以滚动查看内容 -->
</div>

在上述示例中，.el-main类的元素使用overflow: auto属性来显示滚动条，并使用自定义样式隐藏滚动条。通过设置scrollbar-width和scrollbar-color属性，可以定义滚动条的宽度和颜色。通过伪元素选择器和::-webkit-scrollbar选择器，可以定义滚动条的样式，并将滚动条的背景颜色和滑块颜色设置为透明，从而隐藏滚动条。注意一定要用 :depp（）深入覆盖样式！

需要注意的是，这种方法使用了Webkit浏览器的私有样式规则::-webkit-scrollbar，在其他浏览器中可能不适用。如果你需要在不同浏览器中都能正常工作，可以考虑使用JavaScript库或自定义滚动条的解决方案。

请注意，这种方法只是通过样式隐藏了滚动条，但仍然可以通过鼠标滚轮或拖动来滚动内容。