前述：用过vue-seamless-scroll插件，手动滚动列表到底部出现了空白现象，某些表现不符合项目场景，故自己写了一个自己用的组件，如果有人需要可以直接拿去用，如有不足请指教勿喷！
主要功能：
- 列表自动无限循环滚动
- 鼠标移入停止滚动，移出继续滚动
- 待滚动内容高度未铺满并超过容器高度时不滚动
- 支持滚动速度、单次滚动时间间隔、单次滚动高度，三个参数控制
- 可自己手动滚动列表
效果图 ：
组件代码：
export default {name: "my-auto-scroll",props: {list: {type: Array,default: () => [{ name: "张三1" },{ name: "张三2" },{ name: "张三3" },{ name: "张三4" },{ name: "张三5" },{ name: "张三6" },{ name: "张三7" },{ name: "张三8" },{ name: "张三9" },{ name: "张三10" },],},speed: {type: Number,default: 0.1,},//滚动作单步运动时的单纯运动距离singleHeight: {type: Number,default: 0,},//单步运动的时间间隔waitTime: {type: Number,default: 0,},},data() {return {rafId: null,y: 0,showSecond: false,controleHeight: 0,};},watch: {list: {handler(newVal) {var that = this;this.$nextTick(() => {console.log(newVal);if (newVal && newVal.length > 0) {let scrollBox = that.$refs.scrollBox;let outer = that.$refs.outer;if (this.myReq) {cancelAnimationFrame(this.myReq);}// 开启动画if (this.canRun()) this.reqAnimationFrame();// this.reqAnimationFrame();// 手动滚动到底部时滚动条重置到最上边,同时滚动盒子重置为top:0outer.addEventListener("scroll", function () {if (outer.scrollTop + outer.clientHeight + 4 >=outer.scrollHeight) {outer.scrollTop = 0;that.y = 0;scrollBox.style.top = 0;}});}});},deep: true,immediate: true,},},mounted() {window.addEventListener("resize", this.listenResizeFn);},methods: {listenResizeFn() {cancelAnimationFrame(this.myReq);if (this.canRun()) this.reqAnimationFrame();},onMouseover() {clearTimeout(this.timer);cancelAnimationFrame(this.myReq);},onMouseleave() {if (this.canRun()) this.reqAnimationFrame();},canRun() {let scrollItemBox = this.$refs.scrollItemBox;let scrollBox = this.$refs.scrollBox;let outer = this.$refs.outer;// 开启动画条件：滚动盒子(scrollBox)高度高于外层容器(outer)高度if (outer.offsetHeight >= scrollItemBox.offsetHeight) {this.showSecond = false;outer.scrollTop = 0;this.y = 0;scrollBox.style.top = 0;return false;} else {this.showSecond = true;return true;}},//获取dom元素的高度：content+padding+margin+bordergetComputedHeight(dom) {let computedStyle = getComputedStyle(dom);let computedHeight =dom.offsetHeight +parseFloat(computedStyle.marginTop) +parseFloat(computedStyle.marginBottom);return computedHeight;},reqAnimationFrame() {//外层容器let outer = this.$refs.outer;//滚动盒子let scrollBox = this.$refs.scrollBox;//滚动盒子下边的第一个scroll-item-box，let scrollItemBox = this.$refs.scrollItemBox;//滚动速度this.speed = this.speed > 1 " />= 20 && this.waitTime > 500) {if (this.controleHeight >= this.singleHeight) {cancelAnimationFrame(this.myReq);this.controleHeight = 0;this.timer = setTimeout(() => {if (this.canRun) this.reqAnimationFrame();}, this.waitTime);return;} else {// 一次移动高度未达到指定距离继续执行动画this.controleHeight += this.speed;}}//====添加滚动间隔控制====结束//当滚动到第一个scroll-item-box高度时scrollBox重置为top:0,视觉上是无缝滚动if (this.y >= definedHeight) {this.y = 0;}this.myReq = window.requestAnimationFrame(this.reqAnimationFrame);},},destroyed() {window.removeEventListener("resize", this.listenResizeFn);cancelAnimationFrame(this.myReq);if (this.timer) clearTimeout(this.timer);},};.scroll-outer {height: 100%;overflow-x: hidden;position: relative;&::-webkit-scrollbar {width: 0.3vw;}&:hover::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 0.1vw rgba(0, 0, 0, 0.3);border-radius: 0.1vw;background-color: #295099;opacity: 1;// display: none;}&:hover::-webkit-scrollbar-thumb {opacity: 1;border-radius: 0.1vw;-webkit-box-shadow: inset 0 0 0.1vw rgba(0, 0, 0, 0.3);background-color: #0ba9ea;}}.scroll-inner-box {height: auto;position: absolute;width: 100%;top: 0;left: 0;}使用示例：
import autoScroll from "@/components/autoScroll";{{ item.jgjc }}{{ item.total||'--' }}{{ item.ypc||'--' }}{{ item.zlz||'--' }}{{ item.zlwc||'--' }}使用注意：
- autoScroll容器默认是占外层容器宽高百分百，要自己在autoScroll外层加个容器
- 参数waitTIme和singleHeight同时存在，才能出现滚动动画间隔执行的效果
- 样式用了sass，如果有问题可以去掉或者导入sass