vue修改滚动条样式的方法

这篇文章主要介绍了vue修改滚动条样式,首先要知道，修改滚动条样式，利用伪元素-webkit-scrollbar。下面来看看文章内容的具体实现吧

首先要知道，修改滚动条样式，利用伪元素-webkit-scrollbar。

注意， ::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果Safari)。

其次还需要了解滚动条的一些组成：

::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
::-webkit-scrollbar-thumb 滚动条里面的滑块
::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击以微调滑块的位置
::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时的交汇处
::-webkit-resizer 某些元素的corner部分(如textarea的可拖动按钮)

对此有了一些了解之后就可以上手滚动条样式的修改了。

代码实现：

<ul class="nav-tabs-scroll"><li v-for="(item,index) in tabs" :key="index" class="nav-item-scroll">{
<!-- -->{item.text}}</li>
</ul>
<v-textarea outlined v-model="text" style="width: 200px; margin: 16px;" class="text"></v-textarea>

data: () => ({tabs: [{ value: 4001, text: 'Loan Log', code: 'LOAN_LOG' },{ value: 4002, text: 'Document Log', code: 'DOCUMENT_LOG' },{ value: 4003, text: 'Note Log', code: 'NOTE_LOG' },{ value: 4004, text: 'Operation Log', code: 'OPERATION_LOG' },{ value: 4005, text: 'Payment Log', code: 'PAYMENT_LOG' },{ value: 4006, text: 'Maintenance Log', code: 'MAINTENANCE_LOG' },{ value: 4007, text: 'Transaction Log', code: 'TRANSACTION_LOG' },{ value: 4008, text: 'Collection Log', code: 'COLLECTION_LOG' },{ value: 4001, text: 'Loan Log', code: 'LOAN_LOG' },{ value: 4002, text: 'Document Log', code: 'DOCUMENT_LOG' },{ value: 4003, text: 'Note Log', code: 'NOTE_LOG' },{ value: 4004, text: 'Operation Log', code: 'OPERATION_LOG' },{ value: 4005, text: 'Payment Log', code: 'PAYMENT_LOG' },{ value: 4006, text: 'Maintenance Log', code: 'MAINTENANCE_LOG' },{ value: 4007, text: 'Transaction Log', code: 'TRANSACTION_LOG' },{ value: 4008, text: 'Collection Log', code: 'COLLECTION_LOG' },{ value: 4001, text: 'Loan Log', code: 'LOAN_LOG' },{ value: 4002, text: 'Document Log', code: 'DOCUMENT_LOG' },{ value: 4003, text: 'Note Log', code: 'NOTE_LOG' },{ value: 4004, text: 'Operation Log', code: 'OPERATION_LOG' },{ value: 4005, text: 'Payment Log', code: 'PAYMENT_LOG' },{ value: 4006, text: 'Maintenance Log', code: 'MAINTENANCE_LOG' },{ value: 4007, text: 'Transaction Log', code: 'TRANSACTION_LOG' },{ value: 4008, text: 'Collection Log', code: 'COLLECTION_LOG' }],text: ''}),

<style lang="scss" scoped>.nav-tabs-scroll {height: 100px;list-style: none;margin: 0px;padding: 16px 0;overflow-x: auto;display: inline-block;white-space: nowrap;width: 100%; background: #F9FAFD;}.nav-item-scroll {background: #E5F0FF;color: #24252E;font-size: 12px;font-weight: 400;line-height: 16px;padding: 8px 8px 180px;text-align: center;display: inline;margin: 0 4px 0;border-radius: 16px;}.nav-tabs-scroll::-webkit-scrollbar {width: 20px;height: 10px;}.nav-tabs-scroll::-webkit-scrollbar-thumb {border-radius: 5px;background: red;}.nav-tabs-scroll::-webkit-scrollbar-button {width: 10px;border-radius: 50%;background: black;}.nav-tabs-scroll::-webkit-scrollbar-track {box-shadow: inset 0 0 2px #333;border-radius: 5px;background: blue;}.nav-tabs-scroll::-webkit-scrollbar-corner {background: springgreen;}/*.nav-tabs-scroll::-webkit-scrollbar-track-piece {box-shadow: inset 0 0 2px #333;border-radius: 5px;background: plum;}*/
</style>
<style>.text.v-textarea textarea::-webkit-resizer {background: pink;}
</style>

默认的样式：

修改后的样式：

到此这篇关于vue修改滚动条样式的方法的文章就介绍到这了。

vue修改滚动条样式的方法相关推荐

php怎么修改滑动条,修改滚动条样式的方法
这次给大家带来修改滚动条样式的方法,修改滚动条样式的注意事项有哪些,下面就是实战案例,一起来看一下. 支持360极速 chrome firfox 不支持ie9/*滚动条样式*/::-webkit-sc ...
修改滚动条样式的方法
篇文章主要介绍了vue修改滚动条样式,首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar.下面来看看文章内容的具体实现吧首先要知道,修改滚动条样式,利用伪元素-webkit-s ...
iframe+vue修改滚动条样式
iframe修改滚动条样式因为用iframe来展示第三方网页,所以无法修改里面的滚动条样式,于是想到获取第三方网页的高度,然后赋值给iframe标签,使iframe高度自适应,然后在最外层放一个di ...
vue修改滚动条样式
/deep/ ::-webkit-scrollbar {/* 滚动条整体样式 */width: 6px;/* 宽高分别对应横竖滚动条的尺寸 */background: rgb(235, 238, 24 ...
vue、css修改滚动条样式
vue.css修改滚动条样式样式为 /* 滚动条 */ body *::-webkit-scrollbar {width: 10px;height: 10px; } body *::-webkit- ...
php form 添加滚动条,element 使用总结(1. tree使用 2. table修改滚动条样式 3. el-form 自定义label添加icon)...
一, vue_elementUI_ tree树形控件 1.默认点击tree节点的第一个(注意不是checked选中) @node-drop="handleDrop"ref=&qu ...
HTML 修改滚动条样式
修改滚动条样式给一个 div 设置 .orgs-container {max-height: 378px;height: 378px;overflow-y: auto;} Mac 上面的滚动条样式 ...
iframe修改滚动条样式
** iframe修改滚动条样式 ** 1.引入后添加iframe页面或url 2.*如对本身自带的滚动不满意可到引入源文件进行添加样式
Ant Design Table修改滚动条样式
Ant Design Table修改滚动条样式目录一.目的二.步骤 1.了解滚动条的组成部分 2.样式修改 3.实现效果二.总结目录一.目的修改Ant表格的固定列滚动而产生的滚动条样式, ...

vue修改滚动条样式的方法

vue修改滚动条样式的方法相关推荐

最新文章

热门文章