问题描述
产品强者面色阴沉,手指屏幕,高声喝道:此浏览器自带的滚动条样式不美观,不可留也!须更换之!最好可自定义!
一时间,满座开发...
平常工作中,有时候需要对浏览器的滚动条样式做调整,此时解决方案一般有以下几种方式:
- 自己通过js手写一个滚动条,不过性能不好,可能会出现奇怪的bug(不推荐)
使用css的::webkit-scrollbar去修改滚动条样式,不过这样的话只在webkit内核的浏览器上生效,火狐浏览器上不生效(若能说服用户只使用谷歌浏览器,倒是可以试试)
- 笔者之前写过修改浏览器滚动条样式的一篇帖子,代码可以复制粘贴使用:https://segmentfault.com/a/11...
- 使用UI组件库中的滚动条组件,比如
elementui
中的el-scrollbar
组件,不过大家也都知道el-scrollbar
并没有出现在官方组件文档中,原因是什么呢?大家看一下el-scrollbar
组件的源码,就会发现,这个组件是使用js去操作滚动距离,所以性能也并不是最优,源码目录:node_modules/element-ui/package/scrollbars
,简要截图:
- 今天给大家推荐一款在vue中使用的滚动条组件,之所以好用主要体现在轻量级以及这个组价是用css搞一个滚动条,保留了原有的滚动条,所以性能非常不过,这个组件的名字叫做:
simplebar-vue
,当然也有react
和angular
版本的,大家可去github上看下。
vue版本的simplebar的github地址:https://github.com/Grsmto/sim...
使用simplebar-vue的效果图
通过这个效果图可以看到,可自定义滚动条的宽度高度以及颜色,使用步骤如下
使用步骤(以竖向滚动条为例)
第一步,下载simplebar-vue
npm install simplebar-vue --save
第二步,引入注册
// 第二步,引入组件和样式并注册之
import simplebar from "simplebar-vue";
import "simplebar/dist/simplebar.min.css";
components: { simplebar },
第三步,取消给滚动条容器设置overflow: auto;
如下:
.scrollBarWrap {
width: 240px;
height: 360px;
border: 3px solid pink;
/* 第三步,滚动的容器盒子,不能设置自动滚动,注释掉 */
/* overflow: auto; */
}
第四步,给滚动条容器加上标识data-simplebar
加上data-simplebar
标明这个是滚动条的容器,以便于组件实现滚动效果
<div class="scrollBarWrap" data-simplebar>
<!-- 滚动的内容 -->
<h1 v-for="(item, index) in arr" :key="index">{{ item }}</h1>
</div>
第五步,使用组件标签simplebar包裹住内容区即可
如下:
<div class="scrollBarWrap" data-simplebar>
<!-- 包裹使用之 -->
<simplebar>
<h1 v-for="(item, index) in arr" :key="index">{{ item }}</h1>
</simplebar>
</div>
第六步,想要修改样式的话,覆盖即可
如下:
/deep/ .simplebar-vertical {
width: 16px;
}
/deep/ .simplebar-scrollbar::before {
background-color: green;
}
经过以上步骤,效果就出来了,为了方便大家的使用,笔者写了两个demo,分别是竖向滚动条和横向滚动条,大家下载好插件后,复制粘贴在vue项目中就可以直接使用看效果了
完整代码
大家审查dom时,就会发现,滚动条用几个dom搭配伪元素做的,性能很好的哦,当然实际上这个插件还有其他略微强大的功能,大家可自行查阅github文档进行使用
竖向滚动条
<template>
<!-- 第四步,给滚动容器dom上加上data-simplebar属性做标记为滚动容器,data-simplebar-auto-hide="true"设置自动隐藏 -->
<div class="box" data-simplebar data-simplebar-auto-hide="false">
<!-- 第五步,用simplebar标签包裹住滚动的内容 -->
<simplebar>
<h1 v-for="(item, index) in arr" :key="index">{{ item }}</h1>
</simplebar>
</div>
</template>
<script>
// 第一步,下载依赖
// 第二步,引入组件和样式并注册之
import simplebar from "simplebar-vue";
import "simplebar/dist/simplebar.min.css";
export default {
components: { simplebar },
data() {
return {
arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
};
},
};
</script>
<style lang="less" scoped>
.box {
width: 240px;
height: 360px;
border: 3px solid pink;
/* 第三步,滚动的容器盒子,不能设置自动滚动 */
/* overflow: auto; */
text-align: center;
// 第六步,若想要修改颜色和滚动条宽度,覆盖即可
/deep/ .simplebar-vertical {
width: 16px;
}
/deep/ .simplebar-scrollbar::before {
background-color: green;
}
}
</style>
横向滚动条
<template>
<!-- 第四步,给滚动容器dom上加上data-simplebar属性做标记为滚动容器 -->
<div class="box" data-simplebar>
<!-- 第五步,用simplebar标签包裹住滚动的内容 -->
<simplebar>
<!-- 笔者的dom都是h1标签,为使之弹性盒横向排列,所以又套了一层 -->
<div class="itemWrap">
<h1 class="item" v-for="(item, index) in arr" :key="index">
{{ item }}
</h1>
</div>
</simplebar>
</div>
</template>
<script>
// 第一步,下载依赖
// 第二步,引入组件和样式并注册之
import simplebar from "simplebar-vue";
import "simplebar/dist/simplebar.min.css";
export default {
components: { simplebar },
data() {
return {
arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
};
},
};
</script>
<style lang="less" scoped>
.box {
width: 360px;
border: 2px solid pink;
/* 第三步,滚动的容器盒子,不能设置自动滚动 */
/* overflow: auto; */
/* 加点样式 */
.itemWrap {
display: flex;
align-items: center;
.item {
height: 60px;
line-height: 60px;
margin: 0 12px;
}
}
// 第六步,样式修改覆盖即可
/deep/ .simplebar-scrollbar::before {
background-color: red !important;
}
}
</style>
最后还有一个更加强大的滚动条插件,不过要稍微笨重一些,这个:https://github.com/KingSora/O...
产品强者审视结果,颇为满意,抚须笑道:此子聪慧努力,可留,那,老夫再提三十个需求吧!
一时间,满座开发...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。