Numeric input fields are incremented or decremented if the mouse wheel is used when the cursor is on the field. This happens specifically when the user has edited or just clicked on a numeric field and then tries to scroll to a different part of the screen.
I have created a component web block that contains the following Javascript in its OnReady event, which stops mousewheel number scrolling:
var inputTypeNumbers = document.querySelectorAll("input[type=number]");
for (var a = 0; a < inputTypeNumbers.length; a++) {
inputTypeNumbers[a].onwheel = function (event) {
event.target.blur();
};
}
Credit to http://adnan-tech.com/javascript-disable-scroll-on-input-type-number/
Hi,
Maybe you can try it with some JS:
$('input[type=number]').on('wheel', function(e){ return false; }); Maybe you need to adapt it, I can't reproduce that behavior.
$('input[type=number]').on('wheel', function(e){ return false; });
Maybe you need to adapt it, I can't reproduce that behavior.
Hope this can help.
Best regards,
Ricardo M Pereira
Thanks for the pointer Ricardo.
Hi, This solution solves the problem but for me it creates another issue.The fact that you use blur() makes it so that you loose focus on the input and this wasn't intended from the start. Yes it's a minor detail but in terms of usabilitty this might not be what you desire. I came up with another solution. On the layout, on the OnReady you can add a javascript with this code:My solution focus specifically the active screen because in my case that's where I have scroll. But you can target whatever you want.
var elem = document.querySelector('.active-screen'), marker = true, delta, direction, interval = 30, counter1 = 0, counter2, lastInput;if (elem.addEventListener) { if ('onwheel' in document) elem.addEventListener('wheel', wheel); else if ('onmousewheel' in document) elem.addEventListener('mousewheel', wheel); else elem.addEventListener('MozMousePixelScroll', wheel);} else elem.attachEvent('onmousewheel', wheel);function wheel(e) { counter1 += 1; e = e || window.event; delta = e.deltaY || e.detail || e.wheelDelta; if (Math.abs(delta) < 50) return false var newDir = delta > 0 ? 'up' : 'down'; if (delta > 0) { direction = 'up'; } else { direction = 'down'; } if (marker) wheelStart(e); return false;}function wheelStart(event) { marker = false; wheelAct(); if (document.activeElement.type === "number") { lastInput = document.activeElement; document.activeElement.blur(); }}function wheelAct() { counter2 = counter1; setTimeout(function () { if (counter2 == counter1 || Math.abs(delta) < 50) { wheelEnd(); } else { wheelAct(); } }, interval);}function wheelEnd() { marker = true, counter1 = 0, counter2 = 0; lastInput.focus();}Basically what this does is, detect when the user scrolls (on this case in the active-screen which is where I have my scroll). If the active element is an input of type number then save it's reference, so that when you stol scrolling you can focus him again.I hope this helps. Happy coding ;D
The code I posted above makes it so that when you focus, the page tries to scroll to make th focused element visible. If you want to prevent that from happening go to the wheelEnd function and add prevent scroll on the focus:
function wheelEnd() { marker = true, counter1 = 0, counter2 = 0; lastInput.focus({ preventScroll: true, });}