How do i subscribe to onscroll event in Blazor?

Question

I am trying to react to the onscroll event in Blazor to animate an image when the user scrolls down the web page (something like the brand logo on this website: https://lebenswelten-stgabriel.at/). I have tried the native onscroll events and also tried to use the js interop but it doesn't do anything. Is it something that is currently unavailable in Blazor or could I just be listening to the scrolling event on the wrong component?

Worried

That should work at least by js interop. if not, you have bug in your code – Phare

Answer 1

After a couple of trials and errors, I decided to create a custom .net service that I register over on the js side. The service looks a something like this:

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; }
    }
}

The service receives the onscroll event from the DOM and raises an event on the .net side. Here is what the script looks like on the js side:

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

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

I then inject my service in any Blazor component that needs it like this:

@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;
    }
}

Worried

Answer 2

This is how to get scrollTop for myDiv div via eval (weird but working) - see it in action on Blazor REPL.

@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");
   }
}

UPDATE: the similar way to do that but without using eval - thanks to Kristian Mariyanov. See it in action on Blazor REPL here - here you need to add JS custom function getScrollToTop to DOM window object:

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

and invoke it this way:

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

Inferior

Jp.p looks like he's trying to get the scroll distance for the whole window and not just a single div. I know I am. – Because

Answer 3

You can easily handle the Blazor OnScroll event by simply creating a Razor page that works as follows:

@page "/ScrollTest"
<h3>Scrolling</h3>

<div class="scroll" @onscroll="OnScroll">
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
    fdsgdf qsdfsqdf sqfgdsfgdfg rtg ret rez
</div>
<div class="m-2 p-2">Scroll events: @counter</div>


<style>

    div.scroll {
        margin: 4px, 4px;
        padding: 4px;
        width: 500px;
        height: 110px;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: justify;
    }
</style>

@code {

    private int counter;

    private void OnScroll()
    {
        counter++;
    }

}

Vituline