使用vue-seamless-scroll实现echarts图表大屏滚动，出现空白间隔的解决方案

一、背景介绍

最近的业务开发需求，想要实现echarts图表大屏滚动，小编首先采用vue-seamless-scroll进行实现，结果发现第二屏出现空白间隔，尝试了多种解决方案均不生效，最终选择换一个方案。

二、封装的ScrollList组件

<template><div class="scrollContainer" :id="id" @mouseenter="monseenter" @mouseleave="mouseleave"><slot></slot></div>
</template><script>
export default {name: 'ScrollList',props: {id: String},data() {return {timer: null};},methods: {init() {this.setTimer();// this.$once代表只执行一次。如果组件是在keep-alive中包裹，则需要更换函数// 被keep-alive包裹住的组件有两个生命周期函数：activated和deactivatedthis.$once('hook:beforeDestroy', () => {this.removeTimer();});},removeTimer() {if (this.timer) {clearInterval(this.timer);this.timer = null;}},setTimer() {this.removeTimer();this.timer = setInterval(() => {// pixel height：include el and padding    read onlyconst scrollHeight = document.getElementById(this.id).scrollHeight;// visible area height：include el and padding  read onlyconst clientHeight = document.getElementById(this.id).clientHeight;const heightDifference = scrollHeight - clientHeight;// scroll height：readable and writabledocument.getElementById(this.id).scrollTop++;// when el scroll to topif (document.getElementById(this.id).scrollTop >= heightDifference - 1) {this.removeTimer();// make it go back to original location after one secondsetTimeout(() => {document.getElementById(this.id).scrollTop = 0;this.setTimer();}, 1000);}}, 44);},monseenter() {this.removeTimer();},mouseleave() {this.setTimer();}},mounted() {this.init();}
};
</script><style lang="scss" scoped>
.scrollContainer::-webkit-scrollbar {display: none;
}
.scrollContainer::scrollbar {display: none;
}
.scrollContainer {height: 100%;overflow: scroll;overflow-x: hidden;
}
</style>

三、使用ScrollList组件

<template><div><scrollList :id="'leftList'"><!-- todo 写需要循环滚动的代码 --></scrollList></div>
</template><script>import scrollList from '@/components/scrollList/index'export default {components: {scrollList}}
</script>