NumberController behaves weird when scrolling mousewheel

[InCogNiTo124]

I define my NumberController like:

const folder = gui.addFolder("elements");
folder.add(state, 'a', 0.1).min(0).step(0.1);

Keyboard arrow-up and arrow-down work correctly. However, mouse scrolling event increases and decreases the values by 5.3 😕 the same behaviour is experienced with a dofferent controller (the sliders) where keyboards change the value by 0.015 but mouse wheel changes the value by 0.0795 (also 5.3 times larger).

I noticed these lines when searching for the problem:

lil-gui/src/NumberController.js

Lines 416 to 433 in d3c2bfd

	_normalizeMouseWheel( e ) {
	let { deltaX, deltaY } = e;
	// Safari and Chrome report weird non-integral values for a notched wheel,
	// but still expose actual lines scrolled via wheelDelta. Notched wheels
	// should behave the same way as arrow keys.
	if ( Math.floor( e.deltaY ) !== e.deltaY && e.wheelDelta ) {
	deltaX = 0;
	deltaY = -e.wheelDelta / 120;
	deltaY *= this._stepExplicit ? 1 : 10;
	}
	const wheel = deltaX + -deltaY;
	return wheel;
	}

Maybe the magic 120 is wrongly hardcoded? But I can't even grasp my head around what the value would depend on...

I use Brave Browser:
Version 1.36.83 Chromium: 98.0.4758.87 (Official Build) beta (64-bit)

[georgealways]

Hey thanks for pointing this out. Is this happening with a notched mouse wheel, or a continuous scroll, like a trackpad?

The purpose of that function is to distinguish between continuous and notched scrolls, and then normalize them. The goal is to make it so that one "notch" (or "line") on the mouse wheel equates to one step. Strangely enough the 120 is actually part of the spec.

Unfortunately the wheel event varies in behavior pretty drastically from browser to browser—deltaX, deltaY and wheelDelta will mean very different things. Ultimately I'm not too hopeful about a cross-browser fix for this. The only thing I could think of would be some form of browser detection, but I'm open to suggestions.

[InCogNiTo124]

Is this happening with a notched mouse wheel, or a continuous scroll, like a trackpad?

It's a notched mouse wheel, Logitech M720 Triathlon if it matters

Strangely enough the 120 is actually part of the spec.

Wow, that's really interesting haha

Ultimately I'm not too hopeful about a cross-browser fix for this. The only thing I could think of would be some form of browser detection, but I'm open to suggestions.

Yeah, that's what I'm thinking too. Unfortunately I've almost zero experience with JS. Maybe leave this open for future volunteers?

[psnet]

I can confirm this right in the off docs example:

https://lil-gui.georgealways.com/#Guide#Numbers-and-Sliders

• If you put cursor in field
  

• scroll mouse wheel in any direction, example up
  

• step will be not 10 as set by step() method, but 1130

• if scroll mouse wheel backward it will be default value again (i.e. offset / step is not calculated correctly, but calc for + and - is ok)
  

[psnet]

I can confirm this for number input fields and for sliders too

[georgealways]

Yes thank you @psnet, this is a known issue. I would be curious to know which browser, OS and mouse you're using.

The PR above would "normalize" scroll wheel behavior across browsers, but I've been hesitant to merge it, as it would make mouse wheel scrolling much slower for many people.