如何在Blazor中使用C#重置模态框滚动至顶部

针对小屏幕下模态框打开时停留在上次关闭位置的问题，不用引入JavaScript的话，有几个纯Blazor/C#/CSS的可行方案：

• 重新渲染模态框组件复位滚动
  把模态框的内容封装成独立子组件，通过@if指令控制组件的创建与销毁。关闭模态框时销毁组件，再次打开时重新初始化组件，新创建的DOM元素自然会从顶部开始显示，完全避免滚动位置残留。

  示例代码：

  <!-- 父组件 -->
  <button @onclick="OpenModal">打开表单模态框</button>
  
  @if (IsModalVisible)
  {
      <FormModal OnClose="CloseModal" />
  }
  
  @code {
      private bool IsModalVisible { get; set; }
  
      private void OpenModal() => IsModalVisible = true;
      private void CloseModal() => IsModalVisible = false;
  }
  
  <!-- 子组件 FormModal.razor -->
  <div class="modal-backdrop">
      <div class="modal-container" style="max-height: 80vh; overflow-y: auto;">
          <!-- 长表单内容 -->
          <div style="height: 1000px;">示例长表单区域</div>
          <button @onclick="OnClose">关闭模态框</button>
      </div>
  </div>
  
  @code {
      [Parameter] public Action OnClose { get; set; }
  }
  

• CSS动画强制复位滚动
  通过CSS动画触发滚动位置归零，配合Blazor的状态绑定控制动画触发时机。这种方法不需要重新创建组件，仅通过样式变化实现滚动复位。

  示例代码：

  .modal-container {
      max-height: 80vh;
      overflow-y: auto;
  }
  
  .modal-container.reset-scroll {
      animation: reset-scroll 0.01s forwards;
  }
  
  @keyframes reset-scroll {
      to {
          scroll-top: 0;
      }
  }
  

  <button @onclick="OpenModal">打开模态框</button>
  
  @if (IsModalVisible)
  {
      <div class="modal-backdrop">
          <div class="modal-container @(ShouldResetScroll ? "reset-scroll" : "")">
              <!-- 长表单内容 -->
              <div style="height: 1000px;">示例长表单区域</div>
              <button @onclick="CloseModal">关闭模态框</button>
          </div>
      </div>
  }
  
  @code {
      private bool IsModalVisible { get; set; }
      private bool ShouldResetScroll { get; set; }
  
      private void OpenModal()
      {
          IsModalVisible = true;
          ShouldResetScroll = true;
      }
  
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          if (ShouldResetScroll)
          {
              await Task.Delay(10); // 等待DOM更新完成
              ShouldResetScroll = false;
          }
      }
  
      private void CloseModal() => IsModalVisible = false;
  }
  

这两个方案都不会修改URL，也不需要依赖外部JavaScript，完全符合你的技术栈要求。

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