fix: maintain scroll position during zoom with proportional adjustment

When zooming, the page was moving up/down because the scroll position
wasn't being adjusted to account for the scale change.

Solution: Proportional scroll compensation
- Track old scale before applying new scale
- Calculate scale ratio (newScale / oldScale)
- Adjust scroll position: newScrollTop = oldScrollTop * scaleRatio

Example:
- At 100% zoom, scrolled to pixel 1000
- Zoom to 50%: content at pixel 1000 is now at pixel 500
- Adjust scroll to 500 to keep same content visible

Result:
- Page stays visually in the same place when zooming
- Content you're viewing remains stable
- No jumping or movement during zoom transitions
- Works at all zoom levels (50%-200%)
This commit is contained in:
juanatsap
2025-11-12 12:04:22 +00:00
parent b5d0d8389b
commit 6372f293f3
+21 -5
View File
@@ -322,13 +322,29 @@
const cvPaper = document.querySelector('.cv-paper');
if (!cvPaper) return;
// Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
const scaleFactor = zoomValue / 100;
// Get current scale to calculate ratio
const currentTransform = cvPaper.style.transform;
const currentScaleMatch = currentTransform.match(/scale\(([\d.]+)\)/);
const oldScale = currentScaleMatch ? parseFloat(currentScaleMatch[1]) : 1.0;
// Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
const newScale = zoomValue / 100;
// Simple transform without scroll manipulation
// CSS transform-origin is set to "top center" so page scales from top
requestAnimationFrame(() => {
cvPaper.style.transform = `scale(${scaleFactor})`;
// Store current scroll position
const oldScrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Apply the new scale
cvPaper.style.transform = `scale(${newScale})`;
// Calculate proportional scroll position to maintain visual position
// If zooming from 100% to 50%, content at pixel 1000 moves to pixel 500
// So we need to scroll to pixel 500 to see the same content
const scaleRatio = newScale / oldScale;
const newScrollTop = oldScrollTop * scaleRatio;
// Apply new scroll position to keep same content visible
window.scrollTo(0, newScrollTop);
// Update display
updateZoomDisplay(zoomValue);