时间戳

首页 > 解决方案 > 从组件角度添加类

javascript - 从组件角度添加类

问题描述

我有这段代码允许我在特定的 DIV 中滚动，我尝试做的是在滚动时将临时类添加到该 div 中，并在一秒钟后删除该类。

scrollTo (id) {
    setTimeout(() => {
      var titleELe = document.getElementById(id); // my destination div on scroll
      this.scrollMeElement.scrollToPoint(0, titleELe.offsetTop, 1000); // add class to it for 1 second
    }, 100);
};

怎么做？

更新

我做了这个改变：

component

scrolledItem: boolean = false; // added

constructor(...){...}

scrollTo (id) {
    setTimeout(() => {
      var titleELe = document.getElementById(id);
      this.scrolledItem = true; // added
      this.scrollMeElement.scrollToPoint(0, titleELe.offsetTop, 1000);
    }, 100);
    this.scrolledItem = false; // added
};

然后在我的html我添加了[class.active] = "scrolledItem"喜欢

<div id="{{message.id}}" [class.active] = "scrolledItem" class="receiver"></div>

这确实为我的 div 添加了类，但有两个问题：

  1. 它将类添加到所有行，而不仅仅是目标 div。
  2. 它不会active从我的 div 中删除类。

截屏

一

任何想法？

标签： javascriptangulartypescript

解决方案

在我看来，你应该使用模板变量item来传递给函数滚动。

<div class="message" *ngFor="let message of listMessage" (click)="scroll(item)" #item>
  <span>Message {{ message }}</span>
</div>

因此，在您的函数中，您可以访问offsetTop,classList以HTMLElement滚动和操作类。

scroll(item: HTMLElement) {
    window.scrollTo(0, item.offsetTop)
    if (this.oldElemt) {
      this.oldElemt.classList.remove('active')
    }
    item.classList.add('active')
    this.oldElemt = item
  }

使用变量来保存旧元素，如oldElemt.

这是链接演示

推荐阅读