JS 实现点击上下方向键禁用浏览器滚动：代码示例、解释与开发注意事项

要通过 JavaScript 实现点击键盘上下方向键时禁用浏览器滚动，可以监听键盘事件，当按下上下方向键时阻止默认行为。以下是示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>  <script> // 监听键盘按下事件 document.addEventListener('keydown', function (event) { // 判断按下的是否是上方向键（keyCode 为 38）或下方向键（keyCode 为 40） if (event.keyCode === 38 || event.keyCode === 40) { // 阻止默认行为，即阻止浏览器滚动 event.preventDefault(); } }); </script> </body> </html> ``` 代码解释： 1. `document.addEventListener('keydown', ...)`：给文档添加一个 `keydown` 事件监听器，当键盘按键被按下时触发回调函数。 2. `if (event.keyCode === 38 || event.keyCode === 40)`：判断按下的键是否是上方向键（`keyCode` 为 38）或下方向键（`keyCode` 为 40）。 3. `event.preventDefault()`：阻止事件的默认行为，这里就是阻止浏览器因按下上下方向键而产生滚动。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 不同浏览器对 `keyCode` 的支持可能存在差异，部分浏览器建议使用 `event.key` 来判断按键。 2. 禁用滚动可能会影响用户体验，确保在合适的场景下使用。 3. 要注意事件监听器的作用范围，如果在特定元素上监听，可能无法全局禁用滚动。 ######[AI写代码神器 | 421点数解答 | 2025-08-15 10:41:45]

服务商

更多选项

快捷项

自定义