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:
+21
-5
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user