How to implement a scroll bar style with vue

This article mainly introduces vue how to achieve a scroll bar style related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this vue how to achieve a scroll bar style article will have a harvest, let's take a look at it.

The first is the scroll bar style.

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 scroll area will not be written here.

1 the first is the width of the scroll bar slider

Mounted () {/ / scrolling area width I have a traversing 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 / / the width of the visible area is 1065, which is the width of the white background box in the image above. / / the width of the slider is calculated for the width of the scroll bar in order to get the distance that the slider can slide. Below this will say this.activewidth = 1065 * (1065 / bgWidth);}

2 add a mouse event 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; / / scroll area width let bgWidth = this.$refs.liList.clientWidth * this.roleList.length _ document.onmousemove = (e) = > {/ / events in which the mouse is pressed and moved / / the position of the mouse minus the position of the mouse relative to the element to get the position of the element let left = e.clientX-disX; / / left

< 0 表示滑块已经到最左边 //或者left >

ViewArea represents the slider to the rightmost if (left

< 0 || left >

ViewArea) {/ / console.log ("the end"); / / clear the event at this time or the slider will draw a scroll bar area _ document.onmousemove = null;} else {/ / the sliding distance of the slider odiv.style.left = left + "px" / / sliding distance of rolling area = width of rolling area * (distance of slider sliding / 50000) this.$refs.ScrollArea.style.left = "-" + bgWidth * left / 500 + "px";}}; _ document.onmouseup = (e) = > {_ document.onmousemove = null; _ document.onmouseup = null;} }, this is the end of the article on "how to implement a scroll bar style in vue". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve a scroll bar style in vue". If you want to learn more, you are welcome to follow the industry information channel.