Open alquist42 opened 10 months ago
@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,
});
}
Just big thanks! :)
Any way to implement zoomToFit or ZoomToFill? @daybrush
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!