Blazor实现表格上下按键滚动行功能的技术求助

先梳理你代码里的核心问题，再给出修正后的完整实现：

C#方法修正 #

public async Task TableOnKeyDown(KeyboardEventArgs arg)
{
    // 获取当前选中或编辑状态的项，避免空引用
    var currentItem = Items.FirstOrDefault(x => x.Selected || x.EditeMode);
    if (currentItem == null) return;

    int targetRow = currentItem.Row;
    switch (arg.Code)
    {
        case "ArrowDown":
            targetRow = currentItem.Row + 1;
            break;
        case "ArrowUp":
            targetRow = currentItem.Row - 1;
            break;
        default:
            return; // 非上下箭头直接返回
    }

    // 处理边界：确保目标行在有效范围内
    targetRow = Math.Clamp(targetRow, 0, Items.Max(x => x.Row));

    // 选中目标行
    SelectItem(targetRow);

    // 调用JS滚动到目标行
    try
    {
        await JsRuntime.InvokeVoidAsync("GoTo", "a1", $"Row-{targetRow}");
    }
    catch (Exception ex)
    {
        Console.WriteLine($"滚动失败: {ex.Message}");
    }
}

关键修正点： #

• 把async void改为async Task：Blazor中async void会导致异常无法被组件框架捕获，改用async Task符合组件生命周期规范
• 增加currentItem的null判断：避免无选中项时出现空引用异常
• 合并冗余的条件判断：移除重复的选中逻辑判断，统一处理
• 修正JS调用参数：用计算后的targetRow而非原行号，确保滚动到新选中的行
• 增加行边界处理：用Math.Clamp保证目标行不会超出有效范围，避免越界

JavaScript函数修正 #

方案1：优化jQuery版本 #

function GoTo(parentId, targetId) {
    const parentElement = $("#" + parentId);
    const targetElement = $("#" + targetId);
    
    if (!parentElement.length || !targetElement.length) return;

    // 计算目标元素相对于父容器的正确偏移
    const offsetTop = targetElement.offset().top - parentElement.offset().top + parentElement.scrollTop();
    
    parentElement.animate({ scrollTop: offsetTop }, 300, 'swing');
}

方案2：原生JS版本（无需jQuery） #

function GoTo(parentId, targetId) {
    const parentElement = document.getElementById(parentId);
    const targetElement = document.getElementById(targetId);
    
    if (!parentElement || !targetElement) return;

    // 计算滚动目标位置
    const targetOffset = targetElement.offsetTop - parentElement.offsetTop;
    parentElement.scrollTo({
        top: targetOffset + parentElement.scrollTop,
        behavior: 'smooth'
    });
}

关键修正点： #

• 替换position().top为正确偏移计算：position().top是相对于最近定位父元素的偏移，滚动容器中需用offset().top减去父容器偏移，再加上当前滚动位置，才能得到正确的scrollTop值
• 增加元素存在性判断：避免找不到元素时报错
• 去掉不必要的delay(1)：animate可直接执行，延迟会导致滚动不及时
• 原生JS版本减少第三方依赖，更符合Blazor轻量理念

额外注意事项 #

1. 确保表格滚动容器（id="a1"的元素）设置了overflow-y: auto和固定高度，否则滚动不会生效
2. 每个表格行的id要正确对应Row-{行号}，比如行号为3的行需设置id="Row-3"
3. SelectItem方法需正确更新Items中对应项的Selected状态，同时取消之前选中项的状态

内容的提问来源于stack exchange，提问作者MohammadReza OmidAllah