worka / vanilla-js-wheel-zoom

Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)
https://worka.github.io/vanilla-js-wheel-zoom
MIT License
160 stars 30 forks source link

Make disableWheelZoom editable #37

Closed ja1984 closed 1 year ago

ja1984 commented 1 year ago

Nice lib, works really well with html content, great work buddy!

Got a quick question, would it be possible to add a function to toggle wheelZoom after the script have ben initialised? My use case is that I want to require the user to press CMD (on mac) or CTRL (on WIN) to be able to zoom on scroll, if the meta button is not presset I would like the mouse wheel to work like it normally do.

Cheers, Jonathan

worka commented 1 year ago

Thanks buddy

How do you like this quick hack? As fast as your question :)

const el = document.getElementById('myContent');
let zoom = false;

setTimeout(() => zoom = true, 5000);

el.addEventListener('wheel', event => !zoom && event.stopImmediatePropagation());

WZoom.create(el);
tobiaskauer commented 9 months ago

Came here to see how one could disable panning after initialization, thank you for your response @worka – this worked perfectly.

el.addEventListener('mousemove', event => !pan && event.stopImmediatePropagation());