.beauty-scroll {
scrollbar-color: #1890ff #91d5ff; /* 第一个方块色彩,第二个轨道色彩(用于更改火狐浏览器款式) */
scrollbar-width: thin; /* 火狐滚动条无奈自定义宽度,只能通过此属性使滚动条宽度变细 */
-ms-overflow-style: none; /* 暗藏滚动条(在IE和Edge两个浏览器中很难更改款式,固采取暗藏形式) */
/* 以下是chrome浏览器自定义滚动条款式形式 */
&::-webkit-scrollbar {
/*滚动条整体款式*/
width: 3px; /*高宽别离对应横竖滚动条的尺寸*/
height: 1px;
}
&::-webkit-scrollbar-thumb {
/*滚动条外面小方块*/
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
background: #dfdfdf;
}
&::-webkit-scrollbar-track {
/*滚动条外面轨道*/
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
border-radius: 3px;
background: #fff;
}
}
关于css:兼容火狐的滚动条样式
阿里云限时活动-云数据库 RDS MySQL 1核2G配置 1.88/月 速抢
本文由乐趣区整理发布,转载请注明出处,谢谢。