如何自动滚动列表？

Question

我使用 blazor 创建了一个带有位置列表的简单 UI。下图显示了我的位置列表的实际外观 like.when 单击一个位置它被高亮显示了。

之后，当按下继续按钮时，导航到下一页，这个选定的位置将添加到以下位置字段。

然后如果我们想要 edit/change 位置，我们可以按上面的位置字段并重定向到添加位置页面 again.when 我们再次回到添加位置页面，我们应该可以查看所选位置在页面上仍然突出显示。

问题:-添加位置页面的这个位置列表只有scrollable.header然后继续按钮 fixed.There 是 100 locations.So 如果我们选择最底部位置项，当我们重定向页面进行编辑时，我们必须滚动直到找到位置 item.but 这不是最好的情况。

要求:-当我们重定向页面进行编辑时，页面应该滚动自动，这样我就可以看到选择的项目。

我需要使用 blazor 来完成此操作。任何知道这件事的人请帮助我，我感谢你的所有帮助，如果你需要任何代码部分，我会提供给你。

Answer 1

我以前遇到过类似的情况，我用JSInterop解决了。

为每个列表项提供 ID（在您的位置 foreach 循环）：

<div id="@location.Id">

选择位置后，您可以将位置 ID 存储在注册为 Singleton 的全局对象中（在我的例子中，我将其命名为 AppState）。

AppState 将如下所示：

public class AppState
{
  public int LoactionId { get; set; }
}


 private void GoToLocation(int locationId)
        {
            AppState.LoactionId = locationId;
            NavigationManager.NavigateTo("locations");
        }

在您的列表位置组件中添加此覆盖。

protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await JsRuntime.InvokeVoidAsync("scrollTo", AppState.LocationId);
        AppState.LocationId = 0;
    }

Javascript代码（参考this）：

scrollTo = (id) => {    
    if (!id) return;
        var element = document.getElementById(id);
        if (element) {
            var headerOffset = document.getElementById('navbar').offsetHeight;//navbar class is given to header
            var elementPosition = element.getBoundingClientRect().top;
            var offsetPosition = elementPosition - headerOffset;  
            window.scrollTo({
                top: offsetPosition,
                behavior: "smooth"
            });
        }
}

如何自动滚动列表？

How to automatically scroll a list?

css

razor

blazor

blazor-webassembly