Angular 实现列表自动滚动

前言

实现新闻列表自动滚动，类似中奖名单那种滚动，目前 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

标签：滚动,scroller,list,element,listOrigin,列表,Angular
来源： https://www.cnblogs.com/lyrebirth-world/p/15030567.html