How to modify the scroll bar style in Vue

First of all, you need to know that to modify the scroll bar style, use the pseudo element -webkit-scrollbar .

Note that ::-webkit-scrollbar only supports WebKit browsers (such as Google Chrome and Apple Safari).

Secondly, you need to understand some of the components of the scroll bar:

::-webkit-scrollbar The entire scroll bar, you can set the width, etc.
::-webkit-scrollbar-thumb The slider inside the scroll bar
::-webkit-scrollbar-button The buttons at both ends of the scrollbar track allow you to fine-tune the position of the slider by clicking on it
::-webkit-scrollbar-track The track of the scroll bar (with thumb inside)
::-webkit-scrollbar-track-piece The track part of the scrollbar without the slider
::-webkit-scrollbar-corner The intersection of vertical and horizontal scroll bars
::-webkit-resizer The corner part of some elements (such as the draggable button of textarea)

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: