vue怎么修改滚动条样式

本篇内容主要讲解"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: ''    }),

默认的样式：

修改后的样式：

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