Menu
This question was asked before but provided solution is just for jQuery, as I'm facing same problem in ReactJs.
Is it possible to disable the scroll wheel changing the number in an input number field? I removed spinner arrows using CSS but mouse wheel still working and messing the functionality.
I want input type number because it gives numeric keyboard on mobile/touch devices.
761
To prevent scrolling using CSS on React rendered components, we can set the overflow CSS property to hidden with JavaScript. to set the overflow CSS of the body element to hidden when the component mounts with: document. body.
To handle the onScroll event in React: Set the onScroll prop on an element or add an event listener on the window object. Provide an event handler function. Access relevant properties on the event or window objects.
Simplest answer:
<input type="number" onWheel={(e) => e.target.blur()} />
e is short for event.
This also works:
<input type="number" onWheel={() => document.activeElement.blur()} />
Either of these can be used either in a functional or in a class component.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
