scroll 相关问题

加载 Blazor 页面时，我尝试转到 Virtualize 列表的末尾以显示最后的信息（诸如聊天应用程序之类的消息）。所以我有以下 Blazor 代码：加载 Blazor 页面时，我尝试转到 Virtualize 列表的末尾以显示最后的信息（诸如聊天应用程序之类的消息）。所以我有以下 Blazor 代码： <div id="messages-container" style="overflow-y: scroll; height:500px"> <Virtualize Context="message" ItemsProvider="@GetMessages"> <p>@message.Content</p> </Virtualize> </div> <script> function scrollToBottom() { var objDiv = document.getElementById("messages-container"); objDiv.scrollTop = objDiv.scrollHeight; } </script> <button onclick="scrollToBottom();">Manual scroll</button> 在 scrollToBottom() 渲染完第一页消息的初始 DOM 后，如何引发 JS Virtualize 函数？如果我在页面的scrollToBottom()方法中执行OnAfterRenderAsync()JS函数，滚动不会按预期工作，因为： ItemsProvider 不会在 OnAfterRenderAsync() 方法之前调用。所以没有检索到数据。因为没有检索到数据，所以没有渲染 DOM，并且 messages-container 为空，并且有一个 scrollHeight 值定义为 500。 protected override async Task OnAfterRenderAsync(bool firstRender) { await JSRuntime.InvokeVoidAsync("scrollToBottom"); } 但是，在 Virtualize 组件渲染第一页后，如果我单击 Manual scroll 按钮，Virtualize 组件将滚动到数据的最后一页（scrollHeight 值在本例中定义）以 9845 为例）。如何在 scrollToBottom() 组件的第一页渲染完成后调用 Virtualize JS 函数？或者还有其他方法可以转到 Virtualize 组件的底部（最后一页）？理性名为 scrollToBottom 的 JavaScirpt 函数未被调用，因为组件 Virtualize 正在内部调用 StateHasChanged() 事件。根据 Microsoft，StateHasChanged() 事件是 Virtualize 组件调用的唯一状态更改检测器。要检测状态更改，必须实施解决方法。解决方案 @page "/" @inject IJSRuntime JS; <div id="messages-container" style="overflow-y: scroll; height:500px"> <Virtualize Context="message" ItemsProvider="@((ItemsProviderRequest request)=>{ ValueTask<ItemsProviderResult<Messages>> result = GetMessages(request); ContentChanged(); return result; })"> <p>@message.Content</p> </Virtualize> </div> <script> function scrollToBottom() { var objDiv = document.getElementById("messages-container"); objDiv.scrollTop = objDiv.scrollHeight; console.log(objDiv); } </script> @code{ Messages[] messages { get; set; } public bool initialScroll = true; public class Messages { public string? Id { get; set; } public string? Content { get; set; } } public async void ContentChanged() { if (initialScroll) { initialScroll = false; // Scroll to the end of the first page await JS.InvokeAsync<string>("scrollToBottom"); // Scroll to the last page await JS.InvokeAsync<string>("scrollToBottom"); } } public Task<Messages[]> GenerateDummyMessages() { Messages[] messages = new Messages[1000]; for (int i = 0; i < 1000; i++) { messages[i] = new Messages(); messages[i].Id = i.ToString(); messages[i].Content = $"This is the message nr. {i}"; } return Task.FromResult(messages); } public Task<Messages[]> GetDummyMessages(int start, int count) { int index = 0; Messages[] request = new Messages[count]; while (start < messages.Length && index < request.Length) { request[index] = messages[start]; index++; start++; } return Task.FromResult(request); } public async ValueTask<ItemsProviderResult<Messages>> GetMessages(ItemsProviderRequest request) { int max_size = 1000; DateTime start = DateTime.Now; if (messages == null) messages = await GenerateDummyMessages(); // Render the number of elements requested that is equal to the page size from a start index Messages[] messages_ = await GetDummyMessages(request.StartIndex, request.Count); // SIMULATE DELAY while ((DateTime.Now - start).TotalSeconds < 2); return new ItemsProviderResult<Messages>(messages_, max_size); } } 在 Virtualize 组件中，必须修改 ItemsProvider 委托回调。项目提供程序必须通过 Blazor 属性实现匿名 lambda 函数，该属性请求将 ItemsProviderRequest 作为参数传递给回调方法，在本例中为 GetMessages。在匿名 lambda 函数体内，调用回调方法，其结果存储在变量中，调用执行名为 ContentChanged 的滚动功能的方法，然后由匿名函数返回回调方法的结果Virtualize 组件的 lambda 函数用于渲染内容。 <Virtualize Context="message" ItemsProvider="@((ItemsProviderRequest request)=>{ ValueTask<ItemsProviderResult<Messages>> result = GetMessages(request); ContentChanged(); return result; })"> <p>@message.Content</p> </Virtualize> 在 ContentChanged 方法中，JavaScript 函数被调用两次，第一次滚动到渲染元素第一部分的末尾，第二次滚动到底部以请求加载最后一部分元素。 public bool initialScroll = true; public async void ContentChanged() { if (initialScroll) { initialScroll = false; // Scroll to the end of the first page await JS.InvokeAsync<string>("scrollToBottom"); // Scroll to the last page await JS.InvokeAsync<string>("scrollToBottom"); } } 模拟消息提取服务的方法，模拟延迟2秒。 public async ValueTask<ItemsProviderResult<Messages>> GetMessages(ItemsProviderRequest request) { int max_size = 1000; DateTime start = DateTime.Now; if (messages == null) messages = await GenerateDummyMessages(); // Render the number of elements requested that is equal to the page size from a start index Messages[] messages_ = await GetDummyMessages(request.StartIndex, request.Count); // SIMULATE DELAY while ((DateTime.Now - start).TotalSeconds < 2); return new ItemsProviderResult<Messages>(messages_, max_size); } 结果

javascript c# scroll blazor

回答 1 投票 0

React Native FlatList 与 Horizontal ScrollView 中的自动滚动问题

我正在开发一个 React Native 应用程序，其中有两个水平滚动的 FlatList 组件包装在 ScrollView 内。我正在尝试实现自动滚动，但遇到了问题...

react-native scroll infinite-scroll horizontal-scrolling

回答 1 投票 0

React Native FlatList 与 Horizontal ScrollView 中的无限滚动问题

我正在开发一个 React Native 应用程序，其中有两个水平滚动的 FlatList 组件包装在 ScrollView 内。我正在尝试实现无限滚动，但遇到了

react-native scroll infinite-scroll horizontal-scrolling

回答 1 投票 0

平滑滚动不适用于过渡动画

我正在将 NextJS 用于个人网站。我试图同时拥有平滑滚动和变换动画，以增加所选项目的大小。这里有一个简单的演示，展示了我正在做什么...