First of all, you need to know that to modify the scroll bar style, use the pseudo element Note that Secondly, you need to understand some of the components of the scroll bar:
After you have some understanding of this, you can start to modify the scroll bar style. Code implementation: <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> Default style: Modified style: This is the end of this article about how to modify the scroll bar style with Vue. For more relevant content about how to modify the scroll bar style with Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to create a simple column chart using Flex layout in css
>>: Commonly used English fonts for web page creation
Preface Let's get straight to the point. The ...
How to modify the mysql table partitioning progra...
MySQL 5.7 version: Method 1: Use the SET PASSWORD...
Table of contents Set is a special collection who...
Table of contents Preface The difference between ...
CentOS8 was released a few days ago. Although it ...
Table of contents Preface: 1. Concept 2. The bene...
Step 1: Add Ubuntu source Switch to root su root ...
JavaScript writes a random roll call webpage for ...
1. Basic structure of web page: XML/HTML CodeCopy...
Preface When developing a gateway project, the si...
Copy the following code to the code area of Drea...
Table of contents 1. Insert the queried results 2...
I have seen many relevant tutorials on the Intern...
1. Check the software installation path: There is...