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

Concat() of combined fields in MySQL

Table of contents 1. Introduction 2. Main text 2....

Detailed explanation of JavaScript BOM composition and common events

Table of contents 1. BOM 2. Composition of BOM 2....

Two implementation codes of Vue-router programmatic navigation

Two ways to navigate the page Declarative navigat...

XHTML Getting Started Tutorial: Commonly Used XHTML Tags

<br />Just like an article, our web pages sh...

Vue two same-level components to achieve value transfer

Vue components are connected, so it is inevitable...

A detailed analysis and processing of MySQL alarms

Recently, a service has an alarm, which has made ...

Detailed explanation of JS ES6 variable destructuring assignment

Table of contents 1. What is deconstruction? 2. A...

js realizes the image cutting function

This article example shares the specific code of ...

Example of how to embed H5 in WeChat applet webView

Preface WeChat Mini Programs provide new open cap...

Solution to MySQL replication failure caused by disk fullness

Table of contents Case scenario Solving the probl...

How to build mysql master-slave server on centos7 (graphic tutorial)

This article mainly introduces how to build a MyS...

Detailed explanation of computed properties in Vue

Table of contents Interpolation Expressions metho...

Three strategies for rewriting MySQL query statements

Table of contents Complex query and step-by-step ...