1.如何美化滚动条(一般在移动端使用)
以下就是美化属性,直接写在css公共样式里面
//高度可以写死,也可以写计算属性
<style>
.main-scroll{
height: calc(110vh - 210px);
}
.main-scroll{
max-height: 250px;
}
//美化属性
.scrollable {
overflow: auto;
}
//方块大小
.scrollable::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollable::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #dddddd;
}
.scrollable::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #a1a1a1;
}
.scrollable::-webkit-scrollbar-track {
border-radius: 5px;
background: #f6f6f6;
}
</style>
2.使用情况
//公共类名+自定义类名
<div class="main-scroll scrollable"></div>