Blazor中如何实现Div（或组件）内的程序化滚动？

问题原因 #

你当前使用的element.scrollIntoView()默认行为是让目标元素在整个浏览器视口中可见，因此会触发页面整体滚动。要实现仅Div内部滚动，需要调整滚动逻辑，将滚动范围限制在目标Div内。

方案一：优化scrollIntoView参数（简单快捷） #

步骤1：修改JS函数 #

更新index.html中的滚动函数，添加scrollIntoView的配置选项，指定滚动仅在父容器内生效：

<head>
<script type="text/javascript">
    ScrollElementIntoView = element => {
        element.scrollIntoView({
            block: 'start',       // 目标元素顶部对齐容器顶部
            inline: 'nearest',    // 水平方向保持当前位置
            behavior: 'auto',     // 滚动模式：auto（瞬间）/ smooth（平滑）
            scrollMode: 'if-needed' // 仅当元素不可见时才滚动
        });
    };
</script>
...
</head>

步骤2：修正目标元素的Ref绑定 #

当前代码中NextDate绑定在单独的<span>上，建议直接绑定到目标<li>元素，确保滚动目标准确：

<div style="height: 500px; width: 200px; background-color: powderblue; overflow:auto;">
    <ul>
        @foreach (var x in Enumerable.Range(0, 300))
        {
            @if (x == 110)
            {
                <li @ref="NextDate">@x</li>
            }
            else
            {
                <li>@x</li>
            }
        }
    </ul>
</div>

方案二：直接操作容器滚动位置（更可控） #

如果需要完全自定义滚动逻辑，可直接计算目标元素相对于容器的偏移量，手动设置容器的scrollTop：

步骤1：添加容器的ElementReference #

给蓝色Div绑定Ref，用于后续操作：

<div style="height: 500px; width: 200px; background-color: powderblue; overflow:auto;" @ref="ScrollContainer">
    <ul>
        @foreach (var x in Enumerable.Range(0, 300))
        {
            @if (x == 110)
            {
                <li @ref="NextDate">@x</li>
            }
            else
            {
                <li>@x</li>
            }
        }
    </ul>
</div>

步骤2：更新JS函数 #

添加新的JS函数，实现容器内滚动：

<head>
<script type="text/javascript">
    ScrollToElementInContainer = (container, target) => {
        // 获取容器和目标元素的位置信息
        const containerRect = container.getBoundingClientRect();
        const targetRect = target.getBoundingClientRect();
        // 计算目标元素相对于容器的顶部偏移量
        const scrollOffset = targetRect.top - containerRect.top + container.scrollTop;
        // 设置容器滚动位置
        container.scrollTop = scrollOffset;
    };
</script>
...
</head>

步骤3：修改C#调用逻辑 #

在index.razor的@code块中添加容器Ref，并更新滚动方法：

@code {
    ElementReference ScrollContainer { get; set; }
    ElementReference NextDate { get; set; }
    List<Func<Task>> AfterRenderAsyncJobs = new();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        while (AfterRenderAsyncJobs.Any())
        {
            var job = AfterRenderAsyncJobs.First();
            AfterRenderAsyncJobs.Remove(job);
            await job.Invoke();
        }
    }

    private void GoToNextDate()
    {
        AfterRenderAsyncJobs.Add(ScrollToNextDate);
        StateHasChanged();
    }

    private async Task ScrollToNextDate()
    {
        // 调用新的JS函数
        await JsRuntime.InvokeVoidAsync("ScrollToElementInContainer", ScrollContainer, NextDate);
    }
}

两种方案都可以实现仅蓝色Div内部滚动，页面头部等其他元素保持固定位置。根据你的需求选择即可。

内容的提问来源于stack exchange，提问作者Frank Mehlhop