成果：

步骤一：设置滚动条

给需要滚动条的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

vue滚动条设置及美化相关推荐

extjs给panel添加滚动条_ExtJs Panel 滚动条设置
设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...
vue滚动条插件vue-happy-scroll
githb地址使用的话 1.npm install vue-happy-scroll --save-dev; 2.注册 2.1全局注册 <template><happy-scrol ...
vue怎么设置封面_vue设置视频封面教程 vue如何修改标题
现在使用vue的伙伴很多,可以说是视频编辑美化软件排前几的软件,能够使用的功能非常多,有用户就想知道如何才能进行标题的修改,视频的封面又是怎么设置的,想知道的伙伴,可以在iefans看看详细的操作方法 ...
[vue] 怎么解决vue动态设置img的src不生效的问题
[vue] 怎么解决vue动态设置img的src不生效的问题不是应该 require('@/assets/images/xxx.png') 这样吗??你这样多浪费资源啊 @chenqim 个人简介 ...
vue :style 设置背景图片 backgroundImage
vue 日常坑 vue :style 设置动态设背景图片 backgroundImage 控制台会报错 404错误,但是不影响页面使用如下: http://localhost:8080/ooooo/ ...
只需2步，教你在Vue中设置登录验证拦截
摘要:两步教你在Vue中设置登录验证拦截! 本文分享自华为云社区<两步教你在Vue中设置登录验证拦截!>,作者: 灰小猿 . 今天在做vue和springboot交互的一个项目的时候,想要 ...
Vue动态设置Style属性
Vue动态设置Style属性_fuzhongbin的博客-CSDN博客_vue 动态style :style="{ color:domain.groups == 1? '#ccc': dom ...
Vue组件设置缓存kepp-alive 后如何获取数据
Vue组件设置缓存kepp-alive 后如何获取数据解决方案 : beforeRouteEnter activated beforeRouteEnter 每次进去组件渲染时,都会执行beforeR ...
【vue】设置网页的标题和图标
[vue]设置网页在浏览器上打开时的标题和图标设置步骤: 在根目录下找到并打开index.html文件: 设置的图标需要存放在static文件夹下(亲测存放在该文件夹下浏览器才能读取到): 在ind ...

vue滚动条设置及美化

成果：

步骤一：设置滚动条

步骤二：美化滚动条样式

vue滚动条设置及美化相关推荐

最新文章

热门文章