How can I turn off the scroll to change number value?

  • Profile Image
    Asked on April 15, 2016 at 12:55 AM

    Hi Guys,


    When you click on a number box and then use your track pad (laptop, apple mouse or mouse scroll wheel) to move down the page it instead changes the number in the box.  This is rare on a PC with a scroll wheel because you actually have to keep the mouse in the box however on a Mac when you type the curser dissapears and then when you go to move down the page the number annoyingly changes.

    Is there a way to turn this feature off?



  • Profile Image
    Answered on April 15, 2016 at 02:25 AM

    Can you please try injecting the css below to prevent the number field from changing the value when it is scrolled?


    input[type=number]::-webkit-outer-spin-button { 

      -webkit-appearance: none; 

      margin: 0; 


    Here's a demo form where I tested the css: 

    Unfortunately, if the issue persists after injecting the css, then we will need to add javascript to the form to prevent the scroll wheel from changing the value of the input. However, adding javascript is not allowed in the forms.

    It is only possible to add javascript if you use the full source code of the form. Here's the javascript that we will be adding if you choose to use the full source:


      $(':input[type=number]').on('mousewheel',function(e){ $(this).blur(); });


    Here's the post where I got the javascript code: Disable Scroll Wheel On Number Inputs

    If you need further assistance, please let us know.

  • Profile Image
    Answered on May 15, 2017 at 05:38 AM


    Can you please send the edit-mode of the demo? 



  • Profile Image
    Answered on May 15, 2017 at 06:11 AM

    Hello @ARWFashion,

    I have split the thread in order to assist better, as you can find it at the following URL: 

    You are answered at that link.

    Thank you.