Как сохранить верхнюю часть прокрутки в том же положении после увеличения и уменьшения div в Javascript, угловой 10

#javascript #angular10

Вопрос:

Я визуализировал li с изображениями, используя 100% — ный уровень масштабирования в Angular 10. Имеют значение масштабирования, например, 100%, 125%, 150% и т.д. После выбора значения масштабирования я масштабировал ширину и высоту li для значения масштабирования. Ширина * Значение масштабирования, Высота* Значение масштабирования(например, 1,25).

Вопросы возникают после увеличения и уменьшения масштаба, как сохранить верхнюю позицию прокрутки в одном и том же положении. Теперь я нахожусь во втором li и выбираю Масштаб 125%, но это просмотр 1-го li. Пожалуйста, обратитесь к GIF ниже: введите описание изображения здесь

 @HostListener('scroll', ['$event'])
onScroll(event: any) {
    let scrollTop = event.target['scrollTop'];
    this.currentScrollTop = scrollTop;
}
changeZoomLevel(zoomLevel, current?) {
    let getParentId = document.getElementById('parentZoomId');
    getParentId.scrollTop = this.currentScrollTop * zoomLevel;
}

<div class="documentContainer" (scroll)="onScroll($event)" id="parentZoomId">
    <ul>
        <li><img src=""></li>
        <li><img src=""></li>
    </ul>
</div>