<template>
<div class="tradeListDiv"
ref="parent"
@mouseover="scrollPause = true"
@mouseleave="scrollPause = false">
<div ref="child">
<div class="tradeItemDiv"
v-for="(item,index) in tradeList"
:key="index">
</div>
</div>
</div>
</template>
data(){
return{
intervalId:null,
scrollPause: false,
tradeList:[],//数据
}
mounted () {
this.intervalId = setInterval(this.autoScroll, 50);
},
destroyed () {
clearInterval(this.intervalId);
},
methods: {
autoScroll () {
try {
if (this.scrollPause) return;
const scrollTop = this.$refs.parent.scrollTop;
const parentHeight = this.$refs.parent.offsetHeight;
const childHeight = this.$refs.child.offsetHeight;
if (scrollTop + parentHeight >= childHeight - 5) {
this.scrollPause = true;
setTimeout(() => {
try {
this.scrollPause = false;
this.$refs.parent.scrollTop = 0;
} catch (_) { }
}, 1000);
} else {
this.$refs.parent.scrollTop++;
}
} catch (_) { }
},
}
<style>
.tradeListDiv {
margin-top: 15px;
height: 3rem;
overflow: hidden;
overflow-y: auto;
}
.tradeItemDiv {
margin-bottom: 30px;
display: flex;
align-items: center;
}
</style>