js停用键盘上下方向键禁用div滚动条

常见问题技术分享

在某个div元素有上下滚动条的情况下，可以通过键盘方向键来控制滚动，但有些时候我们需要停用上下方向键来控制滚动条。只需要在该div的事件监听器中拦截keydown事件，并对上下键(keyCode 38 和 40)、左右键(KeyCode 37和39)进行检查。如果用户按下这些键，则阻止默认行为。

js停用键盘上下方向键禁用div滚动条

<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="baiqicms" style="height:60px;width:100px;overflow: auto;">
  BaiqiCMS以“简单、小巧、轻量”为设计理念，不用太多复杂的功能，有一套强大和稳定内容管理机制足以，以简洁的基础CMS程序为开发目的。<!-- 内容足够多以启用滚动 -->
</div>
<script>
  // 获取可滚动的div元素
  var scrollableDiv = document.getElementById('poscom');
  // 添加事件监听器以拦截键盘事件
  scrollableDiv.addEventListener('keydown', function(event) {
    // 检查按下的是否是上或下箭头键
    if (event.keyCode === 38 || event.keyCode === 40) {
      // 阻止默认滚动行为
      event.preventDefault();
    }
  });
</script>
</body>
</html>

在这个例子中，当用户尝试在id='baiqicms'中使用上下箭头键滚动时，keydown事件会被捕获，并通过调用event.preventDefault()阻止默认的滚动行为。这样就可以在这个div中禁用上下键导致的滚动。也可以在window中监听处理。

window.addEventListener("keydown", (ev) => {
  // 方向键 左
  if (ev.keyCode === 37 ) {
    //可以在这里根据某些条件做处理
  }
  // 阻止默认滚动行为
  ev.preventDefault()
}

上一篇：vue开发js控制div默认滚动条显示位置
下一篇：vue父组件传值子组件，子组件值修改后父组件值也改变问题

BaiqiCMS V1.2.5 正式版

js停用键盘上下方向键禁用div滚动条

js停用键盘上下方向键禁用div滚动条

相关资讯