Блог

У меня есть список элементов , которые отображаются в представлении с использованием *ngFor , количество элементов в списке в большинстве случаев будет превышать высоту элемента контейнера списка, поэтому overflow: auto используется для прокрутки контейнера.

Каждый элемент в списке представляет собой событие, произошедшее в определенное время в прошлом, время наступления события, сохраненное в формате метки времени UNIX.

На базовом уровне есть BehaviorSubject функция, которая начинается с первой метки времени события и выдает следующее значение каждые 100 миллисекунд.

Возвращаясь к уровню представления, есть подписка на SubjectBehavroure, упомянутая выше, которая выполняет следующее для каждого полученного нового значения:

1. Найдите в списке событие, соответствующее вновь полученному значению
2. Если событие найдено, оно должно быть активировано

     <div class="container" id="scroll">
     <div
       class="list-item"
       id="{{ event.timestamp }}"
       [ngClass]="{ active: event.active }"
       *ngFor="let event of timelineEvents"
     >
      <div class="event-details text">{{ event.timestamp }}</div>
     </div>
   </div>
   
   
   
   
    @Component({
     selector: 'events',
     templateUrl: './events.component.html',
     styleUrls: ['./events.component.scss'],
   })
   export class EventsComponent implements OnInit {
     timelineEvents: Array<FsTimeLineEvent> = [];
     currentTimeSubscription$: Subscription;
     startTimestamp: number;
   
     constructor(private eventFacade: eventFacade) {}
   
     ngOnInit(): void {
       this.currentTimeSubscription$ = this.eventFacade.currentTime$.subscribe(
         (currentTime) => {
   
           // get current timestamp value
           let currentTimestamp = currentTime   this.startTimestamp;
   
           // look for an event
           let currentEventIndex = this.timelineEvents.findIndex(
             (x) => x.timestamp >= currentTimestamp
           );
   
           // set the event to active
           this.setActiveEvent(currentEventIndex);
         }
       );
     }
     setActiveEvent(index) {
       this.timelineEvents.forEach((eve) => {
         eve.active = false;
       });
   
       let currentEvent = this.timelineEvents[index];
       currentEvent.active = true;
   
       let itemToScrollToView = document.getElementById(
         `${currentEvent.timestamp}`
       );
   
       if (itemToScrollToView)
         itemToScrollToView.scrollIntoView({
           behavior: 'smooth',
           block: 'center',
         });
     }
   }
    

Как активируется событие?

1. Добавление к нему специального CSS, простая граница.
2. Прокрутите HTML-элемент события в центр HTML-элемента контейнера списка

Логика работает так, как ожидалось, но только с настройкой поведения прокрутки на «авто».

 let activeElement: HTMLElement = docment.getElementById(`${id}`)
activeElement.scrollIntoView({ behavior: 'auto', block: 'center' })
 

Чего бы я хотел добиться, так это плавной легкой прокрутки, я пытался изменить поведение прокрутки на «плавное», но это вообще отключает прокрутку. Что для меня вообще не имеет смысла, например, почему это происходит?

Я провел массу исследований, я пытался реализовать свою собственную функцию scrollIntoView, но у меня ничего нет! Я был бы признателен вам за помощь! Заранее спасибо!