On zoom, scrollbar sticks to the start of the document in Angular 9

Question

In angular 9, i have implemented zoom on mouse scroll in my pdf viewer. But when i scroll, it scrolls to top-left side always. And i want it to scroll where the mouse is pointing. Please see below image first. On zoom, both vertical and horizontal scroll bar sticks to the top and left side respectively.

I have the following code.

  const { docViewer } = instance;
  const docContainer = instance.iframeWindow.document.querySelector('[data-element="documentContainer"]');
  docContainer.addEventListener('wheel', onWheel, { passive: false });
  function onWheel(e) {
    e.preventDefault();
    console.log("Zoom level - ", instance.getZoomLevel());
    console.log("x - ", e.pageX , " y - ", e.pageY);
    var newZoomFactor;
    if (e.deltaY < 0) {
      newZoomFactor = docViewer.getZoom() * 1.25;
    } else if (e.deltaY > 0) {
      newZoomFactor = docViewer.getZoom() * 0.8;
    }
    console.log("Zoom factor - ", newZoomFactor);
    docViewer.zoomToMouse(newZoomFactor, e.pageX ,e.pageY);
  }