js实现鼠标滑轮滚动加减数量

目的

页面存在数字input，js控制当鼠标移入input时，可鼠标滑轮滚动控制数字的加减

实现

• html

  <input type='number' class='numsInput' value='1' disabled>
  

• js

  $(function(){
      //页面加载完成后执行，需要引入jquery.js
      
      //当需要控制的div是页面加载dom时已存在(静态标签)，时使用
      staticListenMousewheel('numsInput')
      
      //当需要控制的div是js动态添加的时候使用
      dynamicListenMousewheel('numsInput')
  })
  //静态标签监听事件
  function staticListenMousewheel(domClass){
      $('.'+domClass).on("mousewheel DOMMouseScroll", function (e) {
          let that = e.target
          let srcVal = parseInt($(that).val())
          //获取上下滚动事件
          var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1))
          ||  // chrome & ie
              (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));  // firefox
          if (delta > 0) {
              //向上滚动
              console.log("wheelup");
              $(that).val(srcVal + 1)
  
          } else if (delta < 0) {
              if (srcVal >= 2) {
                  //向下滚动
                  console.log("wheeldown");
                  $(that).val(srcVal - 1)
  
              }
          }
           //阻止默认行为:
          //保证滑轮滚动只控制数字的加减，而不会滚动屏幕
         e.preventDefault();
      });
      
  }
  //动态标签监听事件
  function dynamicListenMousewheel(domClass){
       $("body").on("mousewheel DOMMouseScroll", '.'+domClass, function (e) {
          let that = e.target
          let srcVal = parseInt($(that).val())
          //获取上下滚动事件
          var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1))
          ||  // chrome & ie
              (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));  // firefox
          if (delta > 0) {
              //向上滚动
              console.log("wheelup");
              $(that).val(srcVal + 1)
  
          } else if (delta < 0) {
              if (srcVal >= 2) {
                  //向下滚动
                  console.log("wheeldown");
                  $(that).val(srcVal - 1)
  
              }
          }
           //阻止默认行为失效
         // e.preventDefault();
      });
      $("body").on('mouseover','.'+domClass,function () {
          // console.log('鼠标移入,隐藏页面滚动条,',
          //'保证鼠标滑轮滚动只控制输入框的数字加减，而不会同时滚动页面，优化用户体验')
          $("body").css("overflow","hidden")
      })
      $("body").on('mouseout','.'+domClass,function () {
          // console.log('鼠标移出,恢复页面滚动条,恢复鼠标滚动控制页面滚动')
          $("body").css("overflow","auto")
      })
  }