How to prevent browser's Ctrl+Wheel zoom-in/out which in most 3D environment cases is catastrophic?

Questions
1

After I realized that the event.preventDefault() has been cancelled by the browser devs, along with all the relevant books and articles on the web, I stumbled upon a couple of three.js websites that have arrived to at least some decent workarounds - if not satisfying solutions.

My guess is that they provide an HTML layer and three.js is running in the background.
When the user zooms in or out, the three.js rendering is not affected, only the HTML elements are affected.
Am I right? Are there any further hints about that kind of workaround, or other solutions?

For example see:

On the following example the website also makes an actual controlled zooming on the scene.

BTW,

  • Underestimating the developers’ ability to make a usable interface
  • Canceling developers’ intelligent strategies and forcing a dumb “zoom on anything” approach
  • Raw (dumb) image zooming in a 3D CGI environment that usually leads to either a decreased resolution, and a messed-up scene, or to an increased offscreen resolution that will consume the devices’ resources,
  • Not taking into account the possibility of an accidental Ctrl+Wheel that will destroy the 3D scene and the user will end up being confused and disappointed, most likely not knowing how to fix it

Not very bright decisions by the browser-devs right?
It reminds me the era of HTML and JS browser wars -the era of horrible protocols, arbitrary decisions and unbelievable inconsistencies.

2

Where did you get this assumption from?

Are you referring to documents like this…

Event: preventDefault() method - Web APIs | MDN.

3

From code like this that doesn’t work anymore:

	function MouseWheelHandler(e){

		// cross-browser wheel delta
		e = window.event || e;
		
			if(e.ctrlKey == true){
			customzoom(e);
		}	
		return false;
	}
	
	
	
	function customzoom(e){
			//PREVENT ZOOOM-IN OUT WITH CTRL + WHEEL
			e.preventDefault();
			//TODO: custom zoom code here
	}

Have you seen any online example where Ctrl+Wheel doesn’t result in page zoom in-out?

4

OK, I stand corrected, I changed passive from “true” to “false” and the above code worked, no more zooming! Now I wonder if I changed that for some reason, or its behavior has been changed (I’m continuing a project I left 2 years ago)

I was searching for a solution and I found a number of posts complaining that this doesn’t work, also some meta-flags in HTML have been ignored by browsers, etc.
Anyway thanks for the heads up!

	//___________________________________________________________________
	//____MOUSE_WHEEL_DETECTION__&__ZOOM_PREVENTION______

	if (cont.addEventListener){
		// IE9, Chrome, Safari, Opera
		cont.addEventListener("mousewheel", MouseWheelHandler, { passive: false});
		// Firefox
		cont.addEventListener("DOMMouseScroll", MouseWheelHandler, { passive: false});
	}
1 Like