Shulou(Shulou.com)06/02 Report--

本篇内容主要讲解"vue怎么修改滚动条样式"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue怎么修改滚动条样式"吧!

首先要知道，修改滚动条样式，利用伪元素-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的可拖动按钮)

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

代码实现：

{{item.text}}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: '' }), .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; } */ .text.v-textarea textarea::-webkit-resizer { background: pink; }

默认的样式：

修改后的样式：

到此，相信大家对"vue怎么修改滚动条样式"有了更深的了解，不妨来实际操作一番吧!这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.