在vue中全局修改滚动条样式
::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 0;
}
::-webkit-scrollbar-thumb {
cursor: pointer;
border-radius: 5px;
background: rgba(0, 0, 0, 0.15);
transition: color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
- 就会出现如下图所示样式:
注意:app的样式中不要使用scoped,不然全局无法生效!
滚动条样式的说明:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 0;
}
::-webkit-scrollbar-thumb {
cursor: pointer;
border-radius: 5px;
background: rgba(0, 0, 0, 0.15);
transition: color 0.2s ease;
}