隐藏滚动条

自带的滚动条很丑，所以最好把它隐藏了

代码

在app.vue里面定义一个style标签

<style>
/* 隐藏全局滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 对于IE和Edge */
body {
  -ms-overflow-style: none;  /* Windows Edge, IE 浏览器的滚动条隐藏 */
  scrollbar-width: none;  /* Firefox 浏览器的滚动条隐藏 */
}
</style>

这样就可以全局隐藏了

美化滚动条

详细解释

WebKit 内核浏览器（Chrome, Safari）

1.::-webkit-scrollbar：
用于设置滚动条的宽度和高度。

2.::-webkit-scrollbar-track：
用于设置滚动条轨道的背景颜色和样式。

3.::-webkit-scrollbar-thumb：
用于设置滚动条滑块的背景颜色、边框和圆角。

4.::-webkit-scrollbar-thumb:hover：
用于设置滚动条滑块在悬停时的样式。

/* 设置滚动条的宽度 */
::-webkit-scrollbar {
  width: 12px; /* 垂直滚动条的宽度 */
  height: 12px; /* 水平滚动条的高度 */
}

/* 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

/* 设置滚动条滑块悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Firefox内核的浏览器

::-moz-scrollbar：
用于设置滚动条的宽度。

::-moz-scrollbar-track：
用于设置滚动条轨道的背景颜色和样式。

::-moz-scrollbar-thumb：
用于设置滚动条滑块的背景颜色、边框和圆角。

::-moz-scrollbar-thumb:hover：
用于设置滚动条滑块在悬停时的样式。

/* 设置滚动条的宽度 */
::-moz-scrollbar {
  width: 12px;
}

/* 设置滚动条轨道的样式 */
::-moz-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

/* 设置滚动条滑块的样式 */
::-moz-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

/* 设置滚动条滑块悬停时的样式 */
::-moz-scrollbar-thumb:hover {
  background: #555;
}

跨浏览器兼容性示例

为了在多个浏览器中实现自定义滚动条样式，可以结合使用不同的前缀：

/* WebKit 内核浏览器 (Chrome, Safari) */
::-webkit-scrollbar {
  width: 12px;
}

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

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Firefox */
::-moz-scrollbar {
  width: 12px;
}

::-moz-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

::-moz-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

::-moz-scrollbar-thumb:hover {
  background: #555;
}