DataTable选中行滚动问题：按上下键时页面整体滚动如何解决？

问题核心是按下上下箭头时，浏览器默认会触发页面滚动行为，同时scrollIntoView默认基于整个视口滚动，导致页面跟着联动。解决分两步：

1. 阻止箭头键的默认页面滚动行为 #

在键盘事件处理中，调用e.preventDefault()拦截浏览器的默认滚动动作，确保只有DataTable内部触发滚动。

修改后的键盘事件代码：

switch (e.key) {
    case 'ArrowDown': {
        e.preventDefault(); // 阻止页面默认上下滚动
        await selectRow($tr.next());
        break;
    }
    case 'ArrowUp': {
        e.preventDefault(); // 阻止页面默认上下滚动
        await selectRow($tr.prev(), true);
        break;
    }
}

2. 让滚动仅作用于DataTable容器 #

替换原有的scrollIntoView调用，改用更适配DataTable的滚动控制方式：

方案一：使用DataTable内置的scrollTo方法 #

DataTable官方提供了scrollToAPI，可直接定位到目标行，兼容性和适配性更好：

const selectRow = async ($row, isprev = false, isclick = false) => {
    if ($row.length) {
        $f24Table = $('#lista-f24').DataTable();
        $f24Table.$('tr.selected').removeClass('selected');
        $row.addClass('selected');
        
        const scambio = getRowData($row)
        $('#C_ROW').val(scambio)
        await anteprima(scambio)

         if (isclick === false) {
             // 调用DataTable内置方法定位选中行
             $f24Table.scrollTo($row);
         }
    }
}

方案二：手动控制滚动容器的滚动位置 #

如果scrollTo方法不生效，直接操作DataTable的滚动容器（通常是.dataTables_scrollBody）的滚动位置：

const selectRow = async ($row, isprev = false, isclick = false) => {
    if ($row.length) {
        $f24Table = $('#lista-f24').DataTable();
        $f24Table.$('tr.selected').removeClass('selected');
        $row.addClass('selected');
        
        const scambio = getRowData($row)
        $('#C_ROW').val(scambio)
        await anteprima(scambio)

         if (isclick === false) {
             const scrollContainer = $('#lista-f24').closest('.dataTables_scrollBody')[0];
             // 计算目标行相对于滚动容器的偏移量，设置滚动位置
             const rowOffsetTop = $row.offset().top;
             const containerOffsetTop = scrollContainer.offsetTop;
             scrollContainer.scrollTop = rowOffsetTop - containerOffsetTop - scrollContainer.clientTop;
         }
    }
}

两种方案都能实现仅DataTable内部滚动，避免页面整体滚动的问题，优先推荐方案一。

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