/**

* @Desc Vue3.0虛擬滾動(dòng)條組件V3Scroll

* @Time andy by 2021-01

* @About Q：282310962 wx：xy190310*/

props: {//...

},/**

* Vue3.x自定義指令寫法*/

//監(jiān)聽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, //滾動(dòng)條寬度

barHeight: 0, //滾動(dòng)條高度

ratioX: 1, //滾動(dòng)條水平偏移率

ratioY: 1, //滾動(dòng)條垂直偏移率

isTaped: false, //鼠標(biāo)光標(biāo)是否按住滾動(dòng)條

isHover: false, //鼠標(biāo)光標(biāo)是否懸停在滾動(dòng)區(qū)

isShow: !props.autohide, //是否顯示滾動(dòng)條

})

onMounted(()=>{

nextTick(()=>{

updated()

})

})//鼠標(biāo)滑入

const handleMouseEnter = () =>{

data.isHover= truedata.isShow= trueupdated()

}//鼠標(biāo)滑出

const handleMouseLeave = () =>{

data.isHover= falsedata.isShow= false}//拖動(dòng)滾動(dòng)條

const handleDragThumb = (e, index) =>{

const elWrap=ref__wrap.value

const elBarX=ref__barX.value

const elBarY=ref__barY.value

data.isTaped= truelet c={}//阻止默認(rèn)事件

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

}//...

}//點(diǎn)擊滾動(dòng)槽

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

}//更新滾動(dòng)區(qū)

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()//垂直滾動(dòng)條

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)`//隱藏系統(tǒng)滾動(dòng)條

if(barSize) {

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

}else{

data.barHeight= 0elBarY.style.transform= ''elWrap.style.marginRight= ''}//水平滾動(dòng)條

//...

}//滾動(dòng)區(qū)元素/DOM尺寸改變

const handleResize = () =>{//執(zhí)行更新操做

}//...

return{

...toRefs(data),

ref__box, ref__wrap, ref__barX, ref__barY,

handleMouseEnter, handleMouseLeave,

handleDragThumb, handleClickTrack,

updated,//...

}

}

}

總結(jié)

以上是生活随笔為你收集整理的html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。