微客导航 » 文章资讯 » vue中改变滚动条样式的方法

vue中改变滚动条样式的方法

2023-07-29 22:32:04 246

写在前面：我是扬帆向海，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。

这博客是对自己学习的一点点总结及记录，如果您对Java、算法感兴趣，可以关注我的动态，我们一起学习。

用知识改变命运，让我们的家人过上更好的生活。

今天在自己开发的一个项目中，需求是让浏览器的滚动轴变细。想了好长时间才完成，在目前的测试中，滚动条在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:inset006pxrgba(0,0,0,.3);
background-color:rgba(0,0,0,0.1);
}

在index.html中引入样式

方法二

1.首先需要先下载我们所需要的模块，这里我用的是“vuescroll”

//老规矩，先安装模块
npminstallvuescroll

2.在项目中进行导入

//main.js

importvuescrollfrom'vuescroll';
import'vuescroll/dist/vuescroll.css';
Vue.use(vuescroll);

3.引入(浏览器环境)

4.使用

到此这篇关于vue中改变滚动条样式的方法的文章就介绍到这了,更多相关vue改变滚动条样式内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue中改变滚动条样式的方法

热门推荐

随机推荐