html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...

/**

* @Desc Vue3.0虚拟滚动条组件V3Scroll

* @Time andy by 2021-01

* @About Q：282310962 wx：xy190310*/

props: {//...

},/**

* Vue3.x自定义指令写法*/

//监听DOM尺寸变化

directives: {'resize': {

beforeMount:function(el, binding) {

let width= '', height = '';functionget() {

const elStyle= el.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el, null);if (width !== elStyle.width || height !==elStyle.height) {

binding.value({width, height});

}

width=elStyle.width;

height=elStyle.height;

}

el.__vueReize__= setInterval(get, 16);

},

unmounted:function(el) {

clearInterval(el.__vueReize__);

}

}

},

setup(props, context) {

const ref__box= ref(null)

const ref__wrap= ref(null)

const ref__barX= ref(null)

const ref__barY= ref(null)

const data=reactive({

barWidth:0, //滚动条宽度

barHeight: 0, //滚动条高度

ratioX: 1, //滚动条水平偏移率

ratioY: 1, //滚动条垂直偏移率

isTaped: false, //鼠标光标是否按住滚动条

isHover: false, //鼠标光标是否悬停在滚动区

isShow: !props.autohide, //是否显示滚动条

})

onMounted(()=>{

nextTick(()=>{

updated()

})

})//鼠标滑入

const handleMouseEnter = () =>{

data.isHover= truedata.isShow= trueupdated()

}//鼠标滑出

const handleMouseLeave = () =>{

data.isHover= falsedata.isShow= false}//拖动滚动条

const handleDragThumb = (e, index) =>{

const elWrap=ref__wrap.value

const elBarX=ref__barX.value

const elBarY=ref__barY.value

data.isTaped= truelet c={}//阻止默认事件

domUtils.isIE() ? (e.returnValue = false, e.cancelBubble = true) : (e.stopPropagation(), e.preventDefault())

document.onselectstart= () => false

if(index == 0) {

c.dragY= truec.clientY=e.clientY

}else{

c.dragX= truec.clientX=e.clientX

}//...

}//点击滚动槽

const handleClickTrack = (e, index) =>{//...

}//更新滚动区

const updated = () =>{if(props.native) returnconst elBox=ref__box.value

const elWrap=ref__wrap.value

const elBarX=ref__barX.value

const elBarY=ref__barY.value

let barSize=domUtils.getScrollBarSize()//垂直滚动条

if(elWrap.scrollHeight >elWrap.offsetHeight) {

data.barHeight= elBox.offsetHeight **2 /elWrap.scrollHeight

data.ratioY= (elWrap.scrollHeight - elBox.offsetHeight) / (elBox.offsetHeight -data.barHeight)

elBarY.style.transform= `translateY(${elWrap.scrollTop /data.ratioY}px)`//隐藏系统滚动条

if(barSize) {

elWrap.style.marginRight= -barSize + 'px'}

}else{

data.barHeight= 0elBarY.style.transform= ''elWrap.style.marginRight= ''}//水平滚动条

//...

}//滚动区元素/DOM尺寸改变

const handleResize = () =>{//执行更新操做

}//...

return{

...toRefs(data),

ref__box, ref__wrap, ref__barX, ref__barY,

handleMouseEnter, handleMouseLeave,

handleDragThumb, handleClickTrack,

updated,//...

}

}

}