Vue implements a scroll bar style

Vue implements a scroll bar style

insert image description here

At first, I wanted to modify the browser scroll bar style to achieve the effect, but after consulting the information, I found that the browser scroll bar cannot modify the width and position. I had no choice but to write it myself. First, the scroll bar style

<div class="scrollBar" v-if="roleList.length > 5">
        <div
          class="box"
          @mousedown="move"
          v-bind:style="{ width: activewidth + 'px' }"
        ></div>
      </div>

style

.scrollBar {
  width: 500px;
  height: 6px;
  background: #d5dbf5;
  margin: 0 auto;
  margin-top: 72px;
  border-radius: 4px;
  position: relative;

  .box {
    width: 30px;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    left: 0;
  }
  .box:hover {
    cursor: pointer;
  }
}

The style of the scrolling area is not written here

1 First is the width of the scroll bar slider

mounted() {
    //Scrolling area width I am traversing the user list here, so I get the length of the list * the width of each li is the total width let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
    //Visible area width 1065 This is the width of the white background box in the above picture //Slider width 500 is the scroll bar width This width is calculated to get the distance the slider can slide. This will be discussed below this.activewidth = 500 * (1065 / bgWidth);
  },

2 Add mouse events to the slider

move(e) {
      //Get the target element let odiv = e.target;
      //ScrollArea
      //Calculate the position of the mouse relative to the element let disX = e.clientX - odiv.offsetLeft;
      //The distance the scroll bar can scroll let viewArea = 500 - this.activewidth;
      //Scrolling area width let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
      document.onmousemove = (e) => {
        //Mouse pressed and moved event //Subtract the position of the mouse relative to the element from the position of the mouse to get the position of the element let left = e.clientX - disX;
        //left < 0 means the slider has reached the far left //or left > viewArea means the slider has reached the far rightif (left < 0 || left > viewArea) {
          //console.log("It's over");
          // At this time, you need to clear the event or the slider will go out of the scroll bar area document.onmousemove = null;
        } else {
         //The sliding distance of the slider odiv.style.left = left + "px";
          //Sliding distance of scrolling area = scrolling area width * (sliding distance of slider / 500)
          this.$refs.ScrollArea.style.left =
            "-" + bgWidth * left / 500 + "px";
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },

This is the end of this article about how to implement a scroll bar style in Vue. For more relevant content about how to implement scroll bars in 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 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 modify the scroll bar style in Vue

<<:  Centos7 Zabbix3.4 email alarm configuration (solving the problem that the email content is xx.bin attachment)

>>:  MySQL 5.6 decompressed version service cannot be started due to system error 1067

Recommend

Native JS to achieve drag photo wall

This article shares with you a draggable photo wa...

Select does not support double click dbclick event

XML/HTML CodeCopy content to clipboard < div c...

Detailed explanation of the use of Vue h function

Table of contents 1. Understanding 2. Use 1. h() ...

Summary of MySQL view principles and usage examples

This article summarizes the principles and usage ...

In-depth explanation of currying of JS functions

Table of contents 1. Supplementary knowledge poin...

Detailed explanation of JavaScript array deduplication

Table of contents 1. Array deduplication 2. Dedup...

Detailed explanation of common template commands in docker-compose.yml files

Note: When writing the docker-compose.yml file, a...

Linux installation MongoDB startup and common problem solving

MongoDB installation process and problem records ...

Detailed explanation of concat related functions in MySQL

1. concat() function Function: Concatenate multip...

Detailed explanation of this pointing in JS arrow function

Arrow function is a new feature in ES6. It does n...

What is jQuery used for? jQuery is actually a js framework

Introduction to jQuery The jQuery library can be ...

Example of converting timestamp to Date in MySQL

Preface I encountered a situation at work: In the...