cssPC端修改滚动条样式在做⼀些功能中经常会使⽤ hidden:auto 以滑动的形式显⽰下拉的功能 例如聊天功能
⽽直接使⽤auto并不美观
所以 进⾏样式修改
<style>
/*滚动条样式*/
.message::-webkit-scrollbar {
/*滚动条整体样式*/
width: 0.06rem; /*⾼宽分别对应横竖滚动条的尺⼨*/
height: 0.03rem;
}
.message::-webkit-scrollbar-thumb {
/*滚动条⾥⾯⼩⽅块*/
border-radius: 0.05rem;
//  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #F2F3F5;
}
</style>
修改后
css设置表格滚动条
修改其他样式
<style>
/*滚动条样式*/
.message::-webkit-scrollbar {/*滚动条整体样式*/
width: 4px;    /*⾼宽分别对应横竖滚动条的尺⼨*/
height: 4px;
}
.message::-webkit-scrollbar-thumb {/*滚动条⾥⾯⼩⽅块*/            border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.message::-webkit-scrollbar-track {/*滚动条⾥⾯轨道*/
-
webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
</style>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。