找不到原作者链接了,提供参考
<template>
<div>
<div ref="panelContent" class="panelScroll labelScroll" @touchmove="touchMove" @touchstart="touchStart">
</div>
</div>
</template>
<script>
data(){
return {
isTouch: true,
startY: 0,
moveY: 0
},
methods:{
touchStart(event){
if(!this.isFocus){
return
}
this.startY = event.touches[0].clientY;
},
touchMove(event){
if(!this.isFocus){
return
}
let sDom = this.$refs.panelContent;
let sTop = sDom.scrollTop || sDom.pageYOffset || 0;
let sHeight = sDom.scrollHeight - sDom.clientHeight;
this.moveY = event.touches[0].clientY;
if(sTop === 0){
if(this.moveY < this.startY){
this.isTouch = false;
}else{
this.isTouch = true;
} if(this.isTouch){
event.preventDefault();
}
}
if(sHeight <= sTop){
if(this.moveY > this.startY){
this.isTouch = false;
}else{
this.isTouch = true;
}
if(this.isTouch){
event.preventDefault();
}
}
},
}
}
</script>
<style>
.panelScroll{
overflow: scroll;
height:100%;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
}
/* 滚动时隐藏滚动条 */
.labelScroll::-webkit-scrollbar { width: 0 !important }
.labelScroll { -ms-overflow-style: none; }
.labelScroll { overflow: -moz-scrollbars-none; }
</style>