如何在 Blazor 中订阅 onscroll 事件？

Question

我试图对 Blazor 中的 onscroll 事件做出反应，以便在用户向下滚动网页时为图像设置动画（类似于此网站上的品牌徽标： https: //lebenswelten-stgabriel.at/）。我尝试过本机 onscroll 事件，也尝试使用 js 互操作，但它没有执行任何操作。这是目前 Blazor 中不可用的东西，还是我可能只是在错误的组件上监听滚动事件？

Answer 1

经过几次试验和错误后，我决定创建一个自定义 .net 服务，并在 js 端注册。该服务看起来像这样：

using System;
using Microsoft.JSInterop;

namespace myBlazorApp.Services
{
    public class ScrollInfoService: IScrollInfoService
    {
        public event EventHandler<int> OnScroll; 

        public ScrollInfoService(IJSRuntime jsRuntime)
        {
            RegisterServiceViaJsRuntime(jsRuntime);
        }

        private void RegisterServiceViaJsRuntime(IJSRuntime jsRuntime)
        {
            jsRuntime.InvokeVoidAsync("RegisterScrollInfoService", DotNetObjectReference.Create(this));
        }

        public int YValue { get; private set; }

        [JSInvokable("OnScroll")]
        public void JsOnScroll(int yValue)
        {
            YValue = yValue;
            Console.WriteLine("ScrollInfoService.OnScroll " + yValue);
            OnScroll?.Invoke(this, yValue);
        }
    }

    public interface IScrollInfoService
    {
         event EventHandler<int> OnScroll; 
         int YValue { get; }
    }
}

该服务从 DOM 接收 onscroll 事件并在 .net 端引发一个事件。这是 js 端脚本的样子：

window.onscroll = function() {
    if (window.scrollInfoService != null)
        window.scrollInfoService.invokeMethodAsync('OnScroll', window.pageYOffset);
}

window.RegisterScrollInfoService = (scrollInfoService) => {
    window.scrollInfoService = scrollInfoService;
}

然后，我将我的服务注入到任何需要它的 Blazor 组件中，如下所示：

@using myBlazorApp.Services
@inject IScrollInfoService scrollInfoService
@implements IDisposable

<div>
     ...
</div>

@code {

    protected override void OnInitialized()
    {
        scrollInfoService.OnScroll += OnScroll;
    }

    private void OnScroll(object sender, int yValue)
    {
        DoSomething(yValue);
    }

    public void Dispose()
    {
        scrollInfoService.OnScroll -= OnScroll;
    }
}

Answer 2

这是通过（奇怪但有效）获取 divscrollTop的方法- 请参阅Blazor REPL上的实际操作。myDiveval

@inject IJSRuntime JSRuntime;

<h1>DIV scrollTop: @ScrollTop</h1> 

<div id="myDiv" style="overflow:scroll; height:400px;" @onscroll="@OnScroll" >
      
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

@code {
   public int ScrollTop { get; set; }

   private async Task OnScroll(EventArgs e)
   {
      ScrollTop = await JSRuntime.InvokeAsync<int>(
         "eval", "document.getElementById('myDiv').scrollTop");
   }
}

更新：类似的方法，但不使用eval- 感谢Kristian Mariyanov。Blazor REPL 在这里查看它的实际操作- 在这里您需要向对象添加JS自定义函数：getScrollToTopDOM window

<script>
  window.getScrollToTop =  (selector) => {
    return document.querySelector(selector).scrollTop
  }
</script>

并以这种方式调用它：

ScrollTop = await JS.InvokeAsync<int>("getScrollToTop", "#myDiv");