Vue项目修改浏览器滚动条样式
Vue
+Element
组件修改浏览器滚动条样式
前言:在Vue
项目中会有使用到滚动条的情况,但是会遇到原生滚动条的样式不满足UI
设计,因此需要改变滚动条的样式,下面使用两种方式来修改滚动条的样式,以Vue
项目举例
1.第一种利用Element
组件库
在
Vue
2.x的项目中我们可以利用Element UI
组件el-scrollbar
来改变滚动条的样式,虽然API
文档中并没有给出el-scrollbar
的使用方法,但可以正常使用的,使用方法如下:<template><div class="outer"><el-scrollbarstyle="height: 100%;"class="scrollbar-for"><!-- 内容部分 -->...</el-scrollbar></div> </template> <script lang="less"> // 设置滚动条 .scrollbar-for {.el-scrollbar__wrap {overflow-x: hidden; // 底部横向滚动条进行隐藏} } </script>
需要注意的是,使用滚动条组件时将需要滚动展示的内容包进组件内即可,如图中所示左侧的红色框为
el-row
就是包含在右侧红框内组件el-scrollbar
的el-scrollbar__view
里面,这样在超出指定范围height: 100%
的高度时会出现滚动条,这个组件并不是完美的会出现一下小问题,如数据更新后组件未更新的问题,不能像原生一样按住shif
键进行左右横向滚动的问题,这也可能是官方没有直接在API
文档中给出的原因
在
Vue
3.x的项目中,可以配合使用Element Plus
组件库中的Scrollbar
滚动条组件,也就是el-scrollbar
,这次在API
文档中给出了明确的文档可以进行参考,详见Scrollbar 滚动条,使用与Element UI
的el-scrollbar
相差无异(使用前记得关注一下组件库版本与安装的版本)
2.利用CSS
修改原生滚动条样式
如果使用的是
Vue
3.x的版本还是推荐使用Element Plus
组件库,如果你使用了Ant Design Vue
或者其它组件库,没有滚动条的组件库,又或是组件库的滚动条样式不满足设计的需要等原因,这时候就需要修改浏览器的原生滚动条了,下面就仿照el-scrollbar
的样式修改原生滚动条并全局使用,代码如下:<template><div class="container">...</div> </template> ... <style scoped lang="less">.container {height: 100%;overflow: auto;// 滚动条整体部分&::-webkit-scrollbar {width: 6px;height: 6px;}// 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。&::-webkit-scrollbar-button {display: none;}// 滚动条的轨道(里面装有Thumb)&::-webkit-scrollbar-track {background: transparent;}// 滚动条的轨道(里面装有Thumb)&::-webkit-scrollbar-track-piece {background-color: transparent;}// 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)&::-webkit-scrollbar-thumb {background: rgba(144, 147, 153, 0.3);cursor: pointer;border-radius: 4px;}// 边角,即两个滚动条的交汇处&::-webkit-scrollbar-corner {display: none;}// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件&::-webkit-resizer {display: none;}} </style>
通过以上的样式设置在Chrome浏览器上就可以实现和组件库同样效果的滚动条了,而且原生滚动条支持按住
shift
可以进行横向滚动的操作,效果如下图所示:
但是打开Firefox浏览器后发现滚动条样式并没有生效,火狐提供了自己的
CSS
样式属性去设置滚动条的样式,比起谷歌可操作空间非常小,加上适配火狐的代码如下:<template><div class="container">...</div> </template> ... <style scoped lang="less">.container {height: 100%;overflow: auto;scrollbar-color: rgba(144, 147, 153, 0.3) transparent; /* 滑块颜色 滚动条背景颜色 */scrollbar-width: thin; /* 滚动条宽度有三种:thin、auto、none */// 滚动条整体部分&::-webkit-scrollbar {width: 6px;height: 6px;}// 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。&::-webkit-scrollbar-button {display: none;}// 滚动条的轨道(里面装有Thumb)&::-webkit-scrollbar-track {background: transparent;}// 滚动条的轨道(里面装有Thumb)&::-webkit-scrollbar-track-piece {background-color: transparent;}// 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)&::-webkit-scrollbar-thumb {background: rgba(144, 147, 153, 0.3);cursor: pointer;border-radius: 4px;}// 边角,即两个滚动条的交汇处&::-webkit-scrollbar-corner {display: none;}// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件&::-webkit-resizer {display: none;}} </style>
在火狐浏览器上的效果如下:
关于IE的如何设置(就去说服UI吧),当然如果每个页面都要加这些样式属性上去就显得非常臃肿,可以直接在公共样式文件中加上,这里是
common.less
文件,需要滚动是通过设置overflow
的属性值即可,代码如下:*{scrollbar-color: rgba(144, 147, 153, 0.3) transparent; /* 滑块颜色 滚动条背景颜色 */scrollbar-width: thin; /* 滚动条宽度有三种:thin、auto、none */// 滚动条整体部分 } *::-webkit-scrollbar {width: 6px;height: 6px; } // 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 *::-webkit-scrollbar-button {display: none; } // 滚动条的轨道(里面装有Thumb) *::-webkit-scrollbar-track {background: transparent; } // 滚动条的轨道(里面装有Thumb) *::-webkit-scrollbar-track-piece {background-color: transparent; } // 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) *::-webkit-scrollbar-thumb {background: rgba(144, 147, 153, 0.3);cursor: pointer;border-radius: 4px; } // 边角,即两个滚动条的交汇处 *::-webkit-scrollbar-corner {display: none; } // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 *::-webkit-resizer {display: none; }
这样设置就可以完美解决滚动条样式问题了,至于如何关闭滚动条,代码如下:
div {scrollbar-width: none;&::-webkit-scrollbar {display: none;} }
粘贴复制使用 /* 修改浏览器滚动条样式 */ ::-webkit-scrollbar {width: .4rem;height: .4rem;background: hsla(0, 0%, 100% ... 前端项目修改默认滚动条样式 写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法,直接上代码. &::-webkit-scr ... ::-webkit-scrollbar{ /*滚动条整体样式*/width: 10px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px; } ::-webkit-scrollbar-th ... 通常为了满足页面整体的风格的情况下,需要修改滚动条的颜色,各大视频网站都是以添加自定义滚动条的方式来满足,其实也可以理解,毕竟好像就只要添加一两个而已.如果是做管理系统或者其它需要多处修改浏览器滚动条 ... 一.修改谷歌google: 修改样式: 1.全局修改,所有滚动条生效: ::-webkit-scrollbar{width:6px;height:6px; background-color: #000 ... vue项目中改变浏览器滚动条的样式,推荐一个超级好用的vue组件: vuescroll.js favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持favicon.ico图标. 目前vue-cli ... 可以修改滚动条的以下样式: 1.颜色: 2.宽度: 3.阴影: 3.边框样式. CSS代码如下: <style> body { height: 3000px; } body::-webki ... /定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 兼容谷歌和360/ ::-webkit-scrollbar { width: 16px; height: 16px; background-col ...到这里问题就解决了,如果有更好的方式,欢迎补充和讨论
Vue项目修改浏览器滚动条样式相关推荐
最新文章
热门文章