Calculate `scrollTo` inner content

[alquist42]

Hey, such a great work!!

Can you please advice how would be possible to scroll to the elements inside viewer?

For example we have some divs inside:

and when clicking on number of the div - it brings into viewport regardless of scroll position, zoom or div position

Demo: https://69252v.csb.app/

Thanks in advance!

[daybrush]

@alquist42

use .setTo method with offset

function navigateToPage(pageId) {
  alert(pageId);
  const viewportElement = infiniteViewer.getViewport();
  const pageElement = document.querySelector(`[id="${pageId}"]`);
  const viewportRect = viewportElement.getBoundingClientRect();
  const pageRect = pageElement.getBoundingClientRect();
  const zoom = infiniteViewer.getZoom();
  const offsetLeft = (pageRect.left - viewportRect.left) / zoom;
  const offsetTop = (pageRect.top - viewportRect.top) / zoom;
  const pageWidth = pageRect.width / zoom;
  const pageHeight = pageRect.height / zoom;
  const nextZoom = 2;

  infiniteViewer.setTo({
    x: - infiniteViewer.getContainerWidth() / 2 / nextZoom + offsetLeft + pageWidth / 2,
    y: -infiniteViewer.getContainerHeight() / 2 / nextZoom + offsetTop + pageHeight / 2,
    zoom: nextZoom,
    duration: 300,
  });
}

[alquist42]

Just big thanks! :)

[dubem-design]

Any way to implement zoomToFit or ZoomToFill? @daybrush