Blazor wrapper for OverlayScrollbars - beautiful custom scrollbars for Blazor applications. Includes MudBlazor theme integration with dark/light mode support.
$ dotnet add package Mythetech.BlazorOverlayScrollbarsA Blazor wrapper component for OverlayScrollbars - beautiful, customizable scrollbars for your Blazor applications.
dotnet add package Mythetech.BlazorOverlayScrollbars
index.html or _Host.cshtml:<link href="_content/Mythetech.BlazorOverlayScrollbars/css/overlayscrollbars.min.css" rel="stylesheet" />
<!-- Optional: MudBlazor theme integration -->
<link href="_content/Mythetech.BlazorOverlayScrollbars/css/overlayscrollbars-mudblazor-theme.css" rel="stylesheet" />
</body>):<script src="_content/Mythetech.BlazorOverlayScrollbars/js/overlayscrollbars.min.js"></script>
@using Blazor.OverlayScrollbars
<OverlayScrollbar Style="height: 300px;">
<div>
<!-- Your scrollable content here -->
</div>
</OverlayScrollbar>
<OverlayScrollbar Options="@OverlayScrollbarDefaults.HideOnScroll">
<!-- Content -->
</OverlayScrollbar>
| Preset | Description |
|---|---|
OverlayScrollbarDefaults.AlwaysVisible | Scrollbars always visible |
OverlayScrollbarDefaults.HideOnScroll | Hide after scrolling stops (800ms delay) |
OverlayScrollbarDefaults.HorizontalOnly | Horizontal-only scrolling with auto-hide |
OverlayScrollbarDefaults.VerticalOnly | Vertical-only scrolling with auto-hide |
<OverlayScrollbar Options="@_customOptions">
<!-- Content -->
</OverlayScrollbar>
@code {
private OverlayScrollbarOptions _customOptions = new()
{
Scrollbars = new ScrollbarOptions
{
Theme = "os-theme-dark",
AutoHide = "scroll",
AutoHideDelay = 1000,
ClickScroll = true
},
ScrollBehavior = new ScrollBehaviorOptions
{
X = "hidden",
Y = "scroll"
}
};
}
| Parameter | Type | Description |
|---|---|---|
ChildContent | RenderFragment | The content to wrap with scrollbars |
Class | string | Additional CSS classes |
Style | string | Inline styles |
Options | OverlayScrollbarOptions | Scrollbar configuration |
The included overlayscrollbars-mudblazor-theme.css provides automatic theming using MudBlazor CSS variables. Scrollbars will automatically adapt to your MudBlazor theme's colors and respond to dark/light mode changes.
MIT License - Copyright (c) 2026 Mythetech
OverlayScrollbars is licensed under the MIT License by KingSora.