Blazor WASM 滚动事件未触发

Question

我正在使用最新版本的 Blazor WASM 并尝试在滚动时为我的导航栏设置动画，但 onscroll 事件根本没有触发。

我已经在我的应用程序的不同位置尝试了来自 Blazor 的 @onscroll 事件以及本机 onscroll 事件，但都不起作用。我也试过 JSInterop 订阅 window.onscroll 但它也不起作用。我唯一需要做的是来自 Blazor 的 @onwheel 事件，但这不适用于其他类型的滚动。

目前 Blazor 根本不支持此功能还是我做错了什么？

Answer 1

在此document中，不建议@onscroll事件处理滚动。因为它可能会损害 UI 响应能力或消耗过多 CPU 时间。因此，您可能更喜欢使用 JS 互操作来注册触发频率较低的回调。

例如，在div中添加一个ElementReference。此代码在 Index.razor.

@inject IJSRuntime JS
@implements IDisposable

<div @ref="scrollElement" style="border:1px dashed red;height:100px;width:200px;overflow:auto">
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
</div>

@code {
  ElementReference scrollElement;

  DotNetObjectReference<Index> selfReference;

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
        selfReference = DotNetObjectReference.Create(this);
        var minInterval = 500; // Only notify every 500 ms
        await JS.InvokeVoidAsync("onDivScroll",
            scrollElement, minInterval);
    }
  }

  public void Dispose() => selfReference?.Dispose();
}

创建一个 javascript 文件。

function onDivScroll(elem, interval) {
  elem.addEventListener('scroll', function(e) {
      console.log(e)
  }, interval);
}

然后在_Index.html中引用它。

<script src="./filename.js"></script>

Blazor WASM 滚动事件未触发

Blazor WASM scroll event not firing

.net

c#

asp.net-core

blazor

blazor-webassembly