Блог

Я использую последнюю версию Blazor WASM и пытаюсь анимировать панель навигации при прокрутке, но onscroll событие вообще не запускается.

Я пробовал @onscroll событие из Blazor , а также собственное onscroll событие в разных местах моего приложения, но ни то, ни другое не работает. Я также пытался JSInterop подписаться window.onscroll , но это тоже не работает. Единственное, с чем я должен работать, это @onwheel событие Blazor , но это не работает с другими типами прокрутки.

Это просто не поддерживается Blazor в данный момент или я делаю что-то не так?

В этом документе @onscroll не рекомендуется использовать событие для обработки прокрутки. Потому что это может повредить отзывчивости пользовательского интерфейса или потреблять чрезмерное время процессора. Поэтому вы можете предпочесть использовать JS interop для регистрации обратного вызова, который срабатывает реже.

Например, добавьте ссылку на элемент в div. Этот код в 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>