完成滚动条组件
宇天
parent
9314435d20
commit
fc0d706b70
|
|
@ -0,0 +1,234 @@
|
||||||
|
<template>
|
||||||
|
<slot></slot>
|
||||||
|
<div class="is-horizontal"><span class="thumb"></span></div>
|
||||||
|
<div class="is-vertical"><span class="thumb"></span></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:host {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 横向 */
|
||||||
|
|
||||||
|
.is-horizontal,
|
||||||
|
.is-vertical {
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10240;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s linear, visibility 0.3s linear;
|
||||||
|
|
||||||
|
.thumb {
|
||||||
|
display: block;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: rgba(44, 47, 53, 0.25);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(44, 47, 53, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-horizontal {
|
||||||
|
left: 0;
|
||||||
|
bottom: 1px;
|
||||||
|
width: 100%;
|
||||||
|
height: 6px;
|
||||||
|
|
||||||
|
.thumb {
|
||||||
|
width: 0;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 纵向 */
|
||||||
|
.is-vertical {
|
||||||
|
top: 0;
|
||||||
|
right: 1px;
|
||||||
|
width: 6px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.thumb {
|
||||||
|
width: 6px;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:hover) {
|
||||||
|
.is-horizontal,
|
||||||
|
.is-vertical {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default class Scroll {
|
||||||
|
props = {
|
||||||
|
v: ''
|
||||||
|
}
|
||||||
|
constructor() {
|
||||||
|
/* render */
|
||||||
|
this.__X__ = this.root.children[2]
|
||||||
|
this.__Y__ = this.root.children[3]
|
||||||
|
this.__XT__ = this.__X__.children[0]
|
||||||
|
this.__YT__ = this.__Y__.children[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
// 初始化滚动条的位置和长度
|
||||||
|
this._initFn = ev => {
|
||||||
|
var ow = this.offsetWidth
|
||||||
|
var sw = this.scrollWidth
|
||||||
|
var oh = this.offsetHeight
|
||||||
|
var sh = this.scrollHeight
|
||||||
|
|
||||||
|
var yh = ((oh * oh) / sh) >> 0
|
||||||
|
var xw = ((ow * ow) / sw) >> 0
|
||||||
|
if (yh < 50) {
|
||||||
|
yh = 50
|
||||||
|
}
|
||||||
|
if (xw < 50) {
|
||||||
|
xw = 50
|
||||||
|
}
|
||||||
|
|
||||||
|
// 100%时不显示
|
||||||
|
if (xw === ow) {
|
||||||
|
xw = 0
|
||||||
|
}
|
||||||
|
if (yh === oh) {
|
||||||
|
yh = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.oh = oh
|
||||||
|
this.props.sh = sh
|
||||||
|
this.props.ow = ow
|
||||||
|
this.props.sw = sw
|
||||||
|
this.props.yh = yh
|
||||||
|
this.props.xw = xw
|
||||||
|
|
||||||
|
this.__X__.style.width = sw + 'px'
|
||||||
|
this.__XT__.style.width = xw + 'px'
|
||||||
|
|
||||||
|
this.__Y__.style.height = sh + 'px'
|
||||||
|
this.__YT__.style.height = yh + 'px'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 鼠标滚动事件
|
||||||
|
this._wheelFn = ev => {
|
||||||
|
ev.preventDefault()
|
||||||
|
var { sh, oh, yh, sw, ow, xw } = this.props
|
||||||
|
|
||||||
|
// x轴 y轴 都为0时, 不作任何处理
|
||||||
|
if (!xw && !yh) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrollTop += ev.deltaY
|
||||||
|
this.scrollLeft += ev.deltaX
|
||||||
|
|
||||||
|
if (xw) {
|
||||||
|
// 修正滚动条的位置
|
||||||
|
// 滚动比例 x 滚动条的可移动距离
|
||||||
|
var fixedX = (this.scrollLeft / (sw - ow)) * (ow - xw)
|
||||||
|
this.props.thumbX = fixedX
|
||||||
|
this.__Y__.style.transform = `translateX(${this.scrollLeft}px)`
|
||||||
|
|
||||||
|
this.__XT__.style.transform = `translateX(${this.scrollLeft +
|
||||||
|
fixedX}px)`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (yh) {
|
||||||
|
var fixedY = (this.scrollTop / (sh - oh)) * (oh - yh)
|
||||||
|
this.props.thumbY = fixedY
|
||||||
|
|
||||||
|
this.__X__.style.transform = `translateY(${this.scrollTop}px)`
|
||||||
|
this.__YT__.style.transform = `translateY(${this.scrollTop + fixedY}px)`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.addEventListener('mouseenter', this._initFn, false)
|
||||||
|
|
||||||
|
this.addEventListener('wheel', this._wheelFn, false)
|
||||||
|
|
||||||
|
var startX,
|
||||||
|
startY,
|
||||||
|
moveX,
|
||||||
|
moveY,
|
||||||
|
mousemoveFn = ev => {
|
||||||
|
var { sw, ow, xw, sh, oh, yh, thumbY, thumbX } = this.props
|
||||||
|
|
||||||
|
if (startX !== null) {
|
||||||
|
moveX = thumbX + ev.pageX - startX
|
||||||
|
if (moveX < 0) {
|
||||||
|
moveX = 0
|
||||||
|
} else if (moveX > ow - xw) {
|
||||||
|
moveX = ow - xw
|
||||||
|
}
|
||||||
|
this.scrollLeft = (sw - ow) * (moveX / (ow - xw))
|
||||||
|
|
||||||
|
this.__Y__.style.transform = `translateX(${this.scrollLeft}px)`
|
||||||
|
this.__XT__.style.transform = `translateX(${this.scrollLeft +
|
||||||
|
moveX}px)`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (startY !== null) {
|
||||||
|
moveY = thumbY + ev.pageY - startY
|
||||||
|
if (moveY < 0) {
|
||||||
|
moveY = 0
|
||||||
|
} else if (moveY > oh - yh) {
|
||||||
|
moveY = oh - yh
|
||||||
|
}
|
||||||
|
this.scrollTop = (sh - oh) * (moveY / (oh - yh))
|
||||||
|
|
||||||
|
this.__X__.style.transform = `translateY(${this.scrollTop}px)`
|
||||||
|
this.__YT__.style.transform = `translateY(${this.scrollTop +
|
||||||
|
moveY}px)`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mouseupFn = ev => {
|
||||||
|
startX = null
|
||||||
|
startY = null
|
||||||
|
this.props.thumbX = moveX
|
||||||
|
this.props.thumbY = moveY
|
||||||
|
document.removeEventListener('mousemove', mousemoveFn)
|
||||||
|
document.removeEventListener('mouseup', mouseupFn)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.__YT__.addEventListener(
|
||||||
|
'mousedown',
|
||||||
|
ev => {
|
||||||
|
startY = ev.pageY
|
||||||
|
if (!this.props.thumbY) {
|
||||||
|
this.props.thumbY = 0
|
||||||
|
}
|
||||||
|
document.addEventListener('mousemove', mousemoveFn, false)
|
||||||
|
document.addEventListener('mouseup', mouseupFn, false)
|
||||||
|
},
|
||||||
|
false
|
||||||
|
)
|
||||||
|
|
||||||
|
this.__XT__.addEventListener(
|
||||||
|
'mousedown',
|
||||||
|
ev => {
|
||||||
|
startX = ev.pageX
|
||||||
|
if (!this.props.thumbX) {
|
||||||
|
this.props.thumbX = 0
|
||||||
|
}
|
||||||
|
document.addEventListener('mousemove', mousemoveFn, false)
|
||||||
|
document.addEventListener('mouseup', mouseupFn, false)
|
||||||
|
},
|
||||||
|
false
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
unmount() {
|
||||||
|
this.removeEventListener('mouseenter', this._initFn)
|
||||||
|
this.removeEventListener('wheel', this._wheelFn)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue