prevent page scroll/zoom when hovering images
Hunter
Wednesday, March 4th, 2026 at 9:28 AM
845
846 // Pan and Zoom with wheel events (macOS trackpad gestures)
847 container.addEventListener('wheel', (e) => {
- // Don't interfere with dragging or resizing
- if (dragState || resizeState) return;
-
848 e.preventDefault();
849 e.stopPropagation();
850
851 + // Don't interfere with dragging or resizing
852 + if (dragState || resizeState) return;
853 +
854 // Detect pinch zoom (ctrlKey is set for pinch gestures on macOS trackpad)
855 if (e.ctrlKey) {
856 // Zoom at cursor position
1067 }
1068 });
1069
1070 +// Intercept wheel events at the document level to prevent page scroll/zoom when the cursor is over an image container.
1071 +document.addEventListener('wheel', (e) => {
1072 + const hoveredImage = images.find(img => img.container.contains(e.target) || img.container === e.target);
1073 + if (hoveredImage) {
1074 + e.preventDefault();
1075 + }
1076 +}, { passive: false });
1077 +
1078 // Update all image positions when window resizes (for responsive scaling)
1079 window.addEventListener('resize', () => {
1080 images.forEach(img => {