前言
实现新闻列表自动滚动,类似中奖名单那种滚动,目前 js 实现的方式还是有很多相关代码的,不过这里使用 Angular 实现,其实原理差不多,正好业务需要,在此记录下如何实现。
正文
实现思路:
1. 获取页面的元素操作其滚动条
2. 当滚动条距离底部还有 10 个像素内,需要将滚动列表再次追加
3. 当追加次数过多时,需要重新开始,防止页面卡顿(这也是体验不好的地方,如果有其他更好的方案欢迎留言)
HTML:
- 定义一个 div 并设置宽高
- 设置是否可以手动滚动 根据鼠标移入移出来决定
<div #scroller class="scroller-css" [ngStyle]="{'overflow': scrollerOverflow}" (mouseenter)="mouseEnterScroll()" (mouseleave)="mouseLeaveScroll()"> <div *ngFor="let item of list"> <!-- 列表显示内容 --> <div>{{ item }} ------- {{ item }}</div> </div> </div>
CSS:
- 设置内部 div 的高度及定位
.scroller-css { position: relative; height: 200px; } /** 隐藏滚动条 */ .scrollerCss::-webkit-scrollbar { width: 0 !important }
TS:
// 数据列表,可以从接口获取 list = ['test', 'temp', 'demo', 'test', 'temp', 'demo', 'test', 'temp', 'demo']; // 记录最原始的数据列表,保证数据不会被更新掉 listOrigin = []; // 滚动列表 @ViewChild('scroller', {static: false}) scroller: ElementRef; // 是否允许手动滚动 scrollerOverflow: string = 'hidden'; timer: any;
// 获取数据列表,如果是服务器获取数据,可以在获取完数据后执行 getList() { this.listOrigin = [...this.list]; this.scrollerFn(); }
// 初始化获取数据 ngOnInit () { this.getList(); } // 当组件销毁时,移除定时器 ngOnDestroy(): void { clearInterval(this.timer); }
// 滚动列表方法 scrollerFn() { // 获取页面元素 const element = this.scroller.nativeElement; // 记录列表追加次数 let times = 1; // 开始循环滚动 this.timer = setInterval(() => { element.scrollTop++; const marginBottom = element.scrollHeight - element.scrollTop - element.clientHeight; // 如果当前滚动到底 10px 时追加数据 if (marginBottom < 10) { this.list.push(...this.listOrigin); times++; } // 如果追加了 10 次以上,重新开始滚动,防止页面元素过多,这就是为什么需要另外一个变量的原因 if (times > 10) { this.list = [...this.listOrigin]; element.scrollTop = 0; times = 1; } }, 50); // 50 ms 滚动一次,基本是平滑滚动,再大一点就有点卡卡的感觉了 }
// 鼠标移入停止滚动 mouseEnterScroll() { clearInterval(this.timer); // 允许手动滚动 this.scrollerOverflow = 'auto'; this.scroller.nativeElement.scrollTop = 0; this.list = [...this.listOrigin]; }
// 鼠标移出开始滚动 mouseLeaveScroll() { this.scrollerFn(); // 采用自动滚动,隐藏滚动条 this.scrollerOverflow = 'hidden'; }
转载自:https://blog.csdn.net/qq_37638959/article/details/105852868