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:
|
>>: MySQL 5.6 decompressed version service cannot be started due to system error 1067
This article shares with you a draggable photo wa...
I didn't intend to write this blog, but durin...
Based on the Vue image magnifier component packag...
Copy code The code is as follows: 1. Sina Weibo &...
XML/HTML CodeCopy content to clipboard < div c...
Table of contents 1. Understanding 2. Use 1. h() ...
This article summarizes the principles and usage ...
Table of contents 1. Supplementary knowledge poin...
Table of contents 1. Array deduplication 2. Dedup...
Note: When writing the docker-compose.yml file, a...
MongoDB installation process and problem records ...
1. concat() function Function: Concatenate multip...
Arrow function is a new feature in ES6. It does n...
Introduction to jQuery The jQuery library can be ...
Preface I encountered a situation at work: In the...