vue滚动条设置及美化
滚动条设置、美化
·
成果:
步骤一:设置滚动条
给需要滚动条的div添加样式style=“overflow-y: scroll”。例如:
<div id="layer-manage-panel" class="sm-panel-globle scroller" v-drag style="overflow-y: scroll">
步骤二:美化滚动条样式
主要是通过css来调整样式,涉及如下三个类:
- -webkit-scrollbar:滚动条的宽度
- -webkit-scrollbar-track:滚动条轨道
- -webkit-scrollbar-thumb:滚动条滑块
<style>
.scroller::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scroller::-webkit-scrollbar-track {
background-color:transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
.scroller::-webkit-scrollbar-thumb {
background-color: rgb(147,147,153,0.5);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
</style>
参考链接:https://blog.csdn.net/qw8704149/article/details/107649195
更多推荐
已为社区贡献3条内容
所有评论(0)