你所描述的行为是不可能完全用CSS来实现的，因为CSS处理的是显示，而我们在这里讨论的是行为和键盘事件。
我建议在你的输入中添加一个事件监听器，这将防止箭头键对它产生影响，而实际上是防止页面滚动时输入不在焦点上：

document.getElementById('yourInputID').addEventListener('keydown', function(e) {
    if (e.which === 38 || e.which === 40) {
        e.preventDefault();
    }
});

如果你想在输入处于焦点的情况下用箭头键滚动页面事件，我建议使用jQuery，它可以让你写更少的代码，并且支持所有浏览器。

如果你正在使用Angular，请尝试：

<input type="number"onwheel="return false;" (keydown.arrowup)="(false) (keydown.arrowdown)="(false)"/>

你可以使用下面的代码（JSFiddle）：

$(document).ready(function() {
  $("input[type=number]").on("focus", function() {
    $(this).on("keydown", function(event) {
      if (event.keyCode === 38 || event.keyCode === 40) {
        event.preventDefault();
      }
    });
  });
});

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="1.01" max="1000" id="num" />

我知道这不是你想听到的答案，但这是你真的应该做的事情吗？
只是因为，在这种情况下，它不适合 * 你 *，你似乎违背了浏览器和用户的预期行为，试图操纵某些东西做一些它不做的事情。
作为一个用户，在字段中加入Tab键并能够使用向上和向下箭头来更改值是预期的行为。例如单击徽标将您带回家，或按Cmd/Ctrl + W关闭窗口。如果有任何干扰，你最终会疏远用户，他们会对你的界面失去信心。
即使使用标准的type="text"框，上下箭头也不会滚动页面，这种功能似乎与标准的一切背道而驰。
说你没有给出这个问题的背景，它可能是一个内部工具或私人使用，在这种情况下，JS看起来是要走的路！

as you can see in this article you can use this CSS depends on browser that you used

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

<input type="number">

如果你使用的是Angular，你可以创建一个自定义指令来执行任务：

ng generate directive DisableArrowUpDownWheel

下面是该指令的代码：

import { Directive, ElementRef } from '@angular/core';   
@Directive({
  selector: '[disableArrowUpDownWheel]',
})
export class DisableArrowUpDownWheelDirective {
  constructor(private el: ElementRef) {
    let input: HTMLInputElement = el.nativeElement;
    // disable the scroll wheel
    input.onwheel = () => {
      return false;
    };
    // disable the up/down arrow keys
    input.onkeydown = (event: KeyboardEvent) => {
      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') return false;
      else return true;
    };
  }
}

有关自定义指令的更多信息，请参见https://angular.io/guide/attribute-directives。

<input type = "number" inputmode = "numeric">

哦，我只是能够使用keydown侦听器和下面的过滤器来完成：

const invalid = ['e', ',', '.', 'ArrowUp', 'ArrowDown'];
if (invalid.find(e => $event.key === e)) {
  $event.preventDefault();
}

在我的例子中，我也想禁止字符：e,.