Is there a way to programmatically scroll to the center of my element on both the Y and X axes when a specific function is executed? My HTML structure includes the following (I am aiming to scroll to the middle of #viewport):
</div>
<div #viewport class="document-view-port">
<div #viewBox></div>
</div>
In my TypeScript file, I have imported the elements in this manner (attempting to determine the Y center):
@ViewChild('viewBox') viewBox: ElementRef;
@ViewChild('viewport') viewport: ElementRef;
Here are the latest methods I have tried to calculate the center point for scrolling:
zoomIn() {
const elementRect = this.viewport.nativeElement.getBoundingClientRect();
const absoluteElementTop = elementRect.top + window.pageYOffset;
const middle = absoluteElementTop - (elementRect.height / 2);
this.viewport.nativeElement.scrollTo(0, middle)
}
I am encountering issues with achieving this functionality. Any guidance or assistance would be greatly appreciated.
[edit]
The scrollIntoView() method does not yield the desired result in my code. I am looking for a solution to identify these coordinates and implement the scroll without relying on any pre-defined functions.