ModernNerd Code
Published in

ModernNerd Code

How to Disable Scrolling on HTML Number Input in React

A developer asked a question on StackOverflow with the title “Disable scrolling on `<input type=number>`". He asked:

Is it possible to disable the scroll wheel changing the number in an input number field? I’ve messed with webkit-specific CSS to remove the spinner but I’d like to get rid of this behavior altogether. I like using type=number since it brings up a nice keyboard on iOS.

There were many answers that focused on plain JavaScript solutions, but most frontend developers are using JS frameworks, such as React, these days. With that in mind, I provided the following ReactJS focused solution for preventing scrolling when a user moves their mouse wheel over a number input:

The comments explain how it works exhaustively, so I won’t repeat it here. I hope it’s helpful. If you have questions or other solutions, feel free to comment below.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lincoln W Daniel

Chief Bull @ ® Elevating writers @ Author @JavaForHumans Ex: Editor in Chief MarkGrowth (acq.), Engineer @Medium @GoPuff