学习设置滚动条样式!
This commit is contained in:
		@@ -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 > * + * {
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user