commit d6f88aaf378723cdbab5f7e84d5c9a3c11385bec
parent 1e44a17128cc7459225dc2dc5cf20231a93a1977
Author: Hunter
Date: Wed, 4 Mar 2026 09:28:33 -0500
prevent page scroll/zoom when hovering images
Diffstat:
1 file changed, 11 insertions(+), 3 deletions(-)
diff --git a/script.js b/script.js
@@ -845,12 +845,12 @@ function setupImageHandlers(imageData) {
// Pan and Zoom with wheel events (macOS trackpad gestures)
container.addEventListener('wheel', (e) => {
- // Don't interfere with dragging or resizing
- if (dragState || resizeState) return;
-
e.preventDefault();
e.stopPropagation();
+ // Don't interfere with dragging or resizing
+ if (dragState || resizeState) return;
+
// Detect pinch zoom (ctrlKey is set for pinch gestures on macOS trackpad)
if (e.ctrlKey) {
// Zoom at cursor position
@@ -1067,6 +1067,14 @@ document.addEventListener('touchcancel', () => {
}
});
+// Intercept wheel events at the document level to prevent page scroll/zoom when the cursor is over an image container.
+document.addEventListener('wheel', (e) => {
+ const hoveredImage = images.find(img => img.container.contains(e.target) || img.container === e.target);
+ if (hoveredImage) {
+ e.preventDefault();
+ }
+}, { passive: false });
+
// Update all image positions when window resizes (for responsive scaling)
window.addEventListener('resize', () => {
images.forEach(img => {