chrome浏览器地上的滚动条只会在你滚动的时候显示滚动条,如果想让滚动条默认显示可以用如下代码
<div class="test">
滚动的区域
</div>
.tester::-webkit-scrollbar {
/* 隐藏默认的滚动条 */
-webkit-appearance: none;
}
.tester::-webkit-scrollbar:vertical {
/* 设置垂直滚动条宽度 */
width: 2px;
}
.tester::-webkit-scrollbar:horizontal{
/* 设置水平滚动条厚度 */
height: 2px;
}
.tester::-webkit-scrollbar-thumb {
/* 滚动条的其他样式定制,注意,这个一定也要定制,否则就是一个透明的滚动条 */
border-radius: 8px;
border: 2px solid rgba(255,255,255,.4);
background-color: rgba(0, 0, 0, .5);
}
Read More ~
标签:#
前端
网站快速支持自动切换暗黑模式和日常模式
只需要在CSS添加以下代码即可:
@media (prefers-color-scheme: dark) {
body {
background-color: #444;
color: #e4e4e4;
}
a {
color: #e39777;
}
img {
filter: grayscale(30%);
}
}
支持Firefox, Safari, Chrome浏览器
参考来源
Read More ~