Datatable jQuery：方向键切换选中行时如何实现滚动条自动跟随

问题描述 #

这是我的Datatable：

按下向下箭头键时，滚动条不会跟随表格的焦点移动，必须手动拖动滚动条才能看到选中行：

当前使用的键盘事件代码：

$(document).keydown(function(e) {
  if (e.keyCode == 40) { //arrow down
    if (tr.next().length) {
      table.$('tr.selected').removeClass('selected');
      tr.next().addClass('selected');
      tr = table.$('tr.selected');
    }
  }
  
  if (e.keyCode == 38) { // arrow up
    if (tr.prev().length) {
      table.$('tr.selected').removeClass('selected');
      tr.prev().addClass('selected');
      tr = table.$('tr.selected');
    }
  }
})

解决方法 #

在选中新行后，调用原生DOM的scrollIntoView()方法，即可让滚动条自动跟随选中行滚动到可视区域内。可以根据需求设置滚动的过渡效果和对齐规则，修改后的代码如下：

$(document).keydown(function(e) {
  if (e.keyCode == 40) { //arrow down
    if (tr.next().length) {
      table.$('tr.selected').removeClass('selected');
      tr = tr.next().addClass('selected');
      // 自动滚动到选中行
      tr[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
  }
  
  if (e.keyCode == 38) { // arrow up
    if (tr.prev().length) {
      table.$('tr.selected').removeClass('selected');
      tr = tr.prev().addClass('selected');
      // 自动滚动到选中行
      tr[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
  }
})

代码说明 #

• scrollIntoView()会自动将目标元素滚动到其父容器的可视区域内，无需手动计算滚动距离
• behavior: 'smooth'实现平滑滚动效果，去掉该参数则会直接跳转滚动位置
• block: 'nearest'确保如果选中行已经在可视区域内，不会触发多余的滚动操作

内容的提问来源于stack exchange，提问作者Nicola Pane