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

How to set a fixed IP in Linux (tested and effective)

First, open the virtual machine Open xshell5 to c...

js implementation of verification code case

This article example shares the specific code of ...

Detailed steps for using jib for docker deployment in Spring Cloud

Introduction to Jib Jib is a library developed by...

How to avoid data loop conflicts when MySQL is configured with dual masters

I wonder if you have ever thought about this ques...

Vue encapsulates the public function method of exporting Excel data

vue+element UI encapsulates a public function to ...

How to change apt-get source in Ubuntu 18.04

When using apt-get to install, it will be very sl...

How to implement digital paging effect code and steps in CSS

A considerable number of websites use digital pagi...

Summary of MySql index, lock, and transaction knowledge points

This article summarizes the knowledge points of M...

HTML Tutorial: Unordered List

<br />Original text: http://andymao.com/andy...

Gojs implements ant line animation effect

Table of contents 1. Gojs Implementation 1. Drawi...