fix: remove scroll compensation to prevent page jumping on zoom
Removed proportional scroll adjustment that was causing page to jump down when zooming. The transform-origin: top center property keeps content anchored at top naturally without needing scroll compensation.
This commit is contained in:
+1
-17
@@ -323,33 +323,17 @@
|
|||||||
const cvFooter = document.querySelector('.cv-footer');
|
const cvFooter = document.querySelector('.cv-footer');
|
||||||
if (!cvContainer) return;
|
if (!cvContainer) return;
|
||||||
|
|
||||||
// Get current scale to calculate ratio
|
|
||||||
const currentTransform = cvContainer.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.)
|
// Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
|
||||||
const newScale = zoomValue / 100;
|
const newScale = zoomValue / 100;
|
||||||
|
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
// Store current scroll position
|
|
||||||
const oldScrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
||||||
|
|
||||||
// Apply the new scale to both container and footer
|
// Apply the new scale to both container and footer
|
||||||
|
// transform-origin: top center keeps content anchored at top
|
||||||
cvContainer.style.transform = `scale(${newScale})`;
|
cvContainer.style.transform = `scale(${newScale})`;
|
||||||
if (cvFooter) {
|
if (cvFooter) {
|
||||||
cvFooter.style.transform = `scale(${newScale})`;
|
cvFooter.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
|
// Update display
|
||||||
updateZoomDisplay(zoomValue);
|
updateZoomDisplay(zoomValue);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user