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
First, open the virtual machine Open xshell5 to c...
This article shares the installation and configur...
Solution: Bind the click event to the audio compo...
This article example shares the specific code of ...
Introduction to Jib Jib is a library developed by...
I wonder if you have ever thought about this ques...
vue+element UI encapsulates a public function to ...
When using apt-get to install, it will be very sl...
A considerable number of websites use digital pagi...
Win10 system locally installed MySQL8.0.20, perso...
This article summarizes the knowledge points of M...
Table of contents Environment Setup Overview 1.Wh...
need After the user fills out the form and clicks...
<br />Original text: http://andymao.com/andy...
Table of contents 1. Gojs Implementation 1. Drawi...