How to modify the scroll bar style in Vue

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:
  • Vue implements a scroll bar style
  • Vue implements synchronous scrolling of two area scroll bars
  • Vue.js desktop custom scroll bar component beautification scroll bar VScroll
  • Vue remembers the scroll bar and the perfect way to implement drop-down loading
  • How to change the scroll bar style in Vue
  • Vue implements scroll bar position control after rendering data (recommended)
  • Vue scroll bar plug-in implementation code
  • How to implement custom scroll bar (easyscroll) under vue framework

<<:  How to create a simple column chart using Flex layout in css

>>:  Commonly used English fonts for web page creation

Recommend

Index in MySQL

Preface Let's get straight to the point. The ...

How to modify the mysql table partitioning program

How to modify the mysql table partitioning progra...

Summary of how to modify the root password in MySQL 5.7 and MySQL 8.0

MySQL 5.7 version: Method 1: Use the SET PASSWORD...

In-depth explanation of Set and WeakSet collections in ES6

Table of contents Set is a special collection who...

Detailed explanation of the watch listener example in vue3.0

Table of contents Preface The difference between ...

JavaScript modularity explained

Table of contents Preface: 1. Concept 2. The bene...

How to install the latest version of docker using deepin apt command

Step 1: Add Ubuntu source Switch to root su root ...

JavaScript to implement random roll call web page

JavaScript writes a random roll call webpage for ...

HTML Basic Notes (Recommended)

1. Basic structure of web page: XML/HTML CodeCopy...

Example code for using HTML ul and li tags to display images

Copy the following code to the code area of ​​Drea...

MySQL database aggregate query and union query operations

Table of contents 1. Insert the queried results 2...

MySQL 5.7.20 free installation version configuration method graphic tutorial

I have seen many relevant tutorials on the Intern...

Linux Check the installation location of the software simple method

1. Check the software installation path: There is...