学习设置滚动条样式!

This commit is contained in:
Kane 2022-10-22 01:52:42 +08:00
parent 2a160aaabc
commit bfb0375e84
1 changed files with 15 additions and 10 deletions

View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-10-21 16:39:27 * @Date: 2022-10-21 16:39:27
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-10-22 01:23:49 * @LastEditTime: 2022-10-22 01:49:12
* @FilePath: \car_dealer\css\todo-list\to-list.css * @FilePath: \car_dealer\css\todo-list\to-list.css
* @Description: 用于待办事项页面的css * @Description: 用于待办事项页面的css
* *
@ -21,6 +21,9 @@ html {
--light-shadow: #cfcfcf; --light-shadow: #cfcfcf;
--dark-shadow: #afafaf; --dark-shadow: #afafaf;
--scrollbar-backupground-color: #cfcfcf7f;
--scrollbar-track-color: #f7f7f700;
} }
.border { .border {
@ -70,24 +73,26 @@ hr {
.border > .todo_list { .border > .todo_list {
margin-top: 1rem; margin-top: 1rem;
height: 12.2rem; height: 12.2rem;
overflow-y: auto; overflow-y: overlay;
} }
.todo_list::-webkit-scrollbar { .todo_list::-webkit-scrollbar {
width: 10px; width: 10px;
height: 100px; /* height: 100px; */
} }
.todo_list::-webkit-scrollbar-thumb { .todo_list:hover::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 0 5px var(--scrollbar-track-color);
background: #535353; box-shadow: 0 0 5px var(--scrollbar-track-color);
background: var(--scrollbar-backupground-color);
} }
.todo_list::-webkit-scrollbar-track { .todo_list:hover::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px var(--backupground-color); /* -webkit-box-shadow: inset 0 0 5px var(--scrollbar-backupground-color);
border-radius: 10px; box-shadow: 0 0 5px var(--scrollbar-backupground-color);
background: #ededed; border-radius: 10px; */
background: var(--scrollbar-track-color);
} }
.border > .todo_list > * + * { .border > .todo_list > * + * {