Blazor.IntersectionObserver

Simple Blazor class library exposing the Intersection Observer API.

Installation

Install Blazor.IntersectionObserver with NuGet:

Install-Package Blazor.IntersectionObserver

Or via the .NET Core command line interface:

dotnet add package Blazor.IntersectionObserver

Configuration

Register the library in wwwroot/index.html (Blazor WebAssembly) or Pages/_Layout.cshtml (Blazor Server) immediately after the Blazor <script>. Do not skip this, it is required to handle the custom event intersectionchange):

<script src="./_content/Blazor.IntersectionObserver/blazor.intersectionObserver.js" />

Usage

OnIntersectionChangedCallback can be set on IntersectionObserver or TargetElement individual components.

@using Blazor.IntersectionObserver;

<IntersectionObserver
	Threshold=@(new[] { 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 })
	RootMargin="0px" //Optional
	OnIntersectionChangedCallback=@OnIntersectionChanged>

	<TargetElement Name="target1">
		<div class="h-[2000px] bg-red-100">
			<h1>Target 1</h1>
		</div>
	</TargetElement>

	<TargetElement Name="target2">
		<div class="h-[1000px] bg-green-100">
			<h1>Target 2</h1>
		</div>
	</TargetElement>

	<TargetElement Name="target3">
		<div class="h-[3000px] bg-blue-100">
			<h1>Target 3</h1>
		</div>
	</TargetElement>
</IntersectionObserver>

@code {
	void OnIntersectionChanged((string? targetName, double ratio) args)
	{
		// Your code executes when your target elements cross the thresholds on scroll
	}
}