扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关vue中怎么改变滚动条样式的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联主要从事网站制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务饶平,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
用知识改变命运，让我们的家人过上更好的生活。
今天在自己开发的一个项目中，需求是让浏览器的滚动轴变细。想了好长时间才完成，在目前的测试中，滚动条在IE浏览器中不支持。
scrollbar.css
@charset "utf-8";
::-webkit-scrollbar
{
width: 5px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
border-radius: 10px;
background-color: rgba(0,0,0,0.1);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rgba(0,0,0,0.1);
}在 index.html中引入样式
方法二
1. 首先需要先下载我们所需要的模块，这里我用的是“vuescroll”
//老规矩，先安装模块 npm install vuescroll
2. 在项目中进行导入
//main.js import vuescroll from 'vuescroll'; import 'vuescroll/dist/vuescroll.css'; Vue.use(vuescroll);
3. 引入(浏览器环境)