🎨 滚动条样式调整

2021-01-06 16:09:43 +08:00 · 2021-01-06 16:09:43 +08:00 · 56dcc63378
commit 56dcc63378
parent ef557e1d87
1 changed files with 170 additions and 148 deletions
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -183,4 +183,26 @@
  text-align: right;
 }

+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: 1px;
+}
+
+/* 滚动槽 */
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+  background: rgba(255, 0, 0, 0.4);
+}
+
 </style>