巧用 JavaScript 禁用网页上下键滚动，开发要点与注意事项揭秘

可以使用 JavaScript 来禁用网页中键盘上下键滚动窗口的功能。以下是实现该功能的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Disable Arrow Key Scroll</title> </head> <body>  <p>这是一个示例文本。</p> <p>滚动功能已被禁用。</p> <script> // 监听键盘按下事件 document.addEventListener('keydown', function (event) { // 判断按下的键是否为上下键 if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { // 阻止默认的滚动行为 event.preventDefault(); } }); </script> </body> </html> ``` 代码 - `document.addEventListener('keydown', function (event) {... })`：给文档添加一个键盘按下事件的监听器，当键盘上的任意键被按下时，触发回调函数。 - `if (event.key === 'ArrowUp' || event.key === 'ArrowDown')`：判断按下的键是否为向上箭头键（`ArrowUp`）或向下箭头键（`ArrowDown`）。 - `event.preventDefault()`：阻止默认的滚动行为。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 确保在合适的元素上添加事件监听器，这里选择 `document` 是为了全局禁用，但如果只需要在特定元素内禁用，需要调整监听元素。 2. 注意事件的兼容性，不同浏览器对 `event.key` 的支持可能存在差异，可使用 `event.keyCode` 作为备用方案。 3. 禁用滚动可能会影响用户体验，尤其是在需要滚动查看内容的页面，要谨慎使用。 ######[AI写代码神器 | 452点数解答 | 2025-08-18 18:45:26]

服务商

更多选项

快捷项

自定义