WM Blazor Overlay Scrollbars

https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars
Admin
WM Blazor Overlay Scrollbars is a Blazor component that hides native scrollbars and provides custom...
Tokens:8,546
Snippets:59
Trust Score:6.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Usage Examples

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

Examples showing how to wrap HTML content, textareas, and iframes with the scrollbar component.

```html
<BlazorOverlayScrollbars>
	<BlazorOverlayScrollbarsContent>
		<p>Demo</p>
		...
		...
	</BlazorOverlayScrollbarsContent>
	<BlazorOverlayScrollbarsLoading>
		<p>Loading...</p>
	</BlazorOverlayScrollbarsLoading>
</BlazorOverlayScrollbars>
```

```html
<BlazorOverlayScrollbars>
	<BlazorOverlayScrollbarsContent>
		<textarea></textarea>
	</BlazorOverlayScrollbarsContent>
	<BlazorOverlayScrollbarsLoading>
		<b>Loading...</b>
	</BlazorOverlayScrollbarsLoading>
</BlazorOverlayScrollbars>
```

```html
<BlazorOverlayScrollbars>
	<BlazorOverlayScrollbarsContent>
		<iframe  src="your-iframe-source"></iframe>
	</BlazorOverlayScrollbarsContent>
	<BlazorOverlayScrollbarsLoading>
		<b>Loading...</b>
	</BlazorOverlayScrollbarsLoading>
</BlazorOverlayScrollbars>
```

--------------------------------

### Component Methods Example

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Demonstrates how to use component reference to programmatically control scrolling, destroy/reconstruct the component, and manage scroll behavior.

```APIDOC
## Component Methods

Use component reference to programmatically control scrolling, destroy/reconstruct the component, and manage scroll behavior.

```razor
@page "/methods"

<BlazorOverlayScrollbars @ref="theOverlay">
    <BlazorOverlayScrollbarsContent>
        <p>Content that can be scrolled programmatically...</p>
        <p>Use the buttons below to control scrolling.</p>
        <p>More paragraphs to enable scrolling...</p>
        <p>Even more content here...</p>
    </BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>

<div class="controls">
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleDestroy())">Destroy</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleConstroy())">Constroy</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleUpdate())">Update</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleScroll(null, "50%"))">Scroll to Y 50%</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleScroll(0, 0))">Scroll to Top</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleSleep())">Sleep</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleScrollStop())">Scroll Stop</button>
</div>

@code {
    public BlazorOverlayScrollbars theOverlay;

    // Reconstruct the scrollbar component after it has been destroyed
    public async void SampleConstroy()
    {
        await theOverlay.Constroy();
    }

    // Destroy and dispose the current instance, removing all custom elements from DOM
    public async void SampleDestroy()
    {
        await theOverlay.Destroy();
    }

    // Force update the component (true = complete update, false = partial update)
    public async void SampleUpdate()
    {
        await theOverlay.Update(true);
    }

    // Scroll to position using string values (supports percentages like "50%")
    public async void SampleScroll(string x, string y)
    {
        // Parameters: x position, y position, duration in ms (default 1000)
        await theOverlay.Scroll(x, y);
    }

    // Scroll to position using integer pixel values
    public async void SampleScroll(int x, int y)
    {
        await theOverlay.Scroll(x, y, 500);  // Custom duration of 500ms
    }

    // Put the instance to sleep - stops all DOM observation and scroll responses
    public async void SampleSleep()
    {
        await theOverlay.Sleep();
    }

    // Stop any current scroll animation
    public async void SampleScrollStop()
    {
        await theOverlay.ScrollStop();
    }
}
```
```

--------------------------------

### Implement BlazorOverlayScrollbars component and methods

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

This example demonstrates how to reference the BlazorOverlayScrollbars component and trigger its methods via button click events.

```razor
<BlazorOverlayScrollbars  @ref="theOverlay">
	<BlazorOverlayScrollbarsContent>
		your-html-content
		...
	</BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>

<div>
	<button @onclick="@(e => SampleDestroy())">Destroy</button>
	<button @onclick="@(e => SampleConstroy())">Constroy</button>
	<button @onclick="@(e => SampleUpdate())">Update</button>
	<button @onclick="@(e => SampleScroll(null, "50%"))">Scroll to X 50%</button>
	<button @onclick="@(e => SampleScroll(0, 0))">Scroll to X 0</button>
	<button @onclick="@(e => SampleSleep())">Sleep</button>
	<button @onclick="@(e => SampleScrollStop())">Scroll Stop</button>
</div>
```

```c#
@code  {
	public  BlazorOverlayScrollbars  theOverlay;

	public  async  void  SampleConstroy()
	{
		await  theOverlay.Constroy();
	}

	public  async  void  SampleDestroy()
	{
		await  theOverlay.Destroy();
	}

	public  async  void  SampleUpdate()
	{
		await  theOverlay.Update(true);
	}

	public  async  void  SampleScroll(string  x, string  y)
	{
		await  theOverlay.Scroll(x, y);
	}

	public  async  void  SampleScroll(int  x, int  y)
	{
		await  theOverlay.Scroll(x, y);
	}

	public  async  void  SampleSleep()
	{
		await  theOverlay.Sleep();
	}

	public  async  void  SampleScrollStop()
	{
		await  theOverlay.ScrollStop();
	}
}
```

--------------------------------

### Register Service

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

Register the service in your application's Startup or Program file.

```csharp
builder.Services.AddWMBOS();
```

--------------------------------

### Configure BlazorOverlayScrollbars

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

Instantiate WMBOSConfigurations and pass it to the BlazorOverlayScrollbars component.

```html
<BlazorOverlayScrollbars  Configurations="configurations">
	<BlazorOverlayScrollbarsContent>
		your-html-here
		...
	</BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>
```

```c#
@code  {
	public  WMBOSConfigurations  configurations;

	protected  override  void  OnInitialized()
	{
		configurations = new  WMBOSConfigurations {
			className = "os-theme-round-dark",
			resize = "both",
			paddingAbsolute = true
		};
		configurations.scrollbars.clickScrolling = true;
	}
}
```

--------------------------------

### Implement Custom Themes

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

Define a custom CSS class name and provide the path to the custom CSS file in the configuration.

```html
<BlazorOverlayScrollbars  Configurations="configSample">
	<BlazorOverlayScrollbarsContent>
		your-html-here
		...
	</BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>
```

```c#
@code  {
	public  WMBOSConfigurations  configSampleOne;
	
	protected  override  void  OnInitialized()
	{
		configSample = new  WMBOSConfigurations {
			className = "your-custom-class",
			themePath = "your-custom-css-file-path.css",
		};
	}
}
```

--------------------------------

### Import WMBOS Namespace

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Add the namespace to the _Imports.razor file to make the component available.

```razor
@* _Imports.razor *@
@using WMBlazorOverlayScrollbars.WMBOS
```

--------------------------------

### Component Parameters Reference

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

All available parameters for the BlazorOverlayScrollbars component.

```APIDOC
## Component Parameters Reference

All available parameters for the BlazorOverlayScrollbars component.

```csharp
// Component parameters
[Parameter] public RenderFragment BlazorOverlayScrollbarsContent { get; set; }  // Main content
[Parameter] public RenderFragment BlazorOverlayScrollbarsLoading { get; set; }  // Loading state content
[Parameter] public string CssClass { get; set; }                                 // Additional CSS classes
[Parameter] public string Id { get; set; }                                       // Element ID
[Parameter] public WMBOSConfigurations Configurations { get; set; }              // Configuration object
[Parameter] public string ProjectName { get; set; }                              // Assembly name for callbacks

// Callback parameters (all require [JSInvokable] static methods)
[Parameter] public string CallbackOnInitialized { get; set; }
[Parameter] public string CallbackOnInitializationWithdrawn { get; set; }
[Parameter] public string CallbackOnDestroyed { get; set; }
[Parameter] public string CallbackOnScrollStart { get; set; }
[Parameter] public string CallbackOnScroll { get; set; }
[Parameter] public string CallbackOnScrollStop { get; set; }
[Parameter] public string CallbackOnContentSizeChanged { get; set; }
[Parameter] public string CallbackOnHostSizeChanged { get; set; }
[Parameter] public string CallbackOnUpdated { get; set; }
```
```

--------------------------------

### Import Namespaces

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

Add the required namespace to your _Imports.razor file.

```razor
@using  WMBlazorOverlayScrollbars.WMBOS
```

--------------------------------

### Apply Built-in Themes

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

Set the className attribute in the configuration object to one of the available theme strings.

```html
<BlazorOverlayScrollbars  Configurations="configSample">
	<BlazorOverlayScrollbarsContent>
		your-html-here
		...
	</BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>
```

```c#
@code  {
	public  WMBOSConfigurations  configSampleOne;
	
	protected  override  void  OnInitialized()
	{
		configSample = new  WMBOSConfigurations {
			className = "os-theme-thick-dark"
		};
	}
}
```

--------------------------------

### Define WMBOS Configuration Classes

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Use these classes to define custom scrollbar behavior, appearance, and overflow settings.

```csharp
// Configuration class with default values
public class WMBOSConfigurations
{
    public string className { get; set; } = "os-theme-dark";    // Theme class name
    public string themePath { get; set; } = null;                // Path to custom CSS theme
    public string resize { get; set; } = "none";                 // "none", "both", "horizontal", "vertical"
    public bool sizeAutoCapable { get; set; } = true;
    public bool clipAlways { get; set; } = true;
    public bool normalizeRTL { get; set; } = true;
    public bool paddingAbsolute { get; set; } = true;
    public bool autoUpdate { get; set; } = false;
    public int autoUpdateInterval { get; set; } = 33;
    public WMBOSOverflowBehavior overflowBehavior { get; set; }
    public WMBOSNativeScrollbarsOverlaid nativeScrollbarsOverlaid { get; set; }
    public WMBOSScrollbars scrollbars { get; set; }
    public WMBOSTextarea textarea { get; set; }
}

public class WMBOSOverflowBehavior
{
    public string x { get; set; } = "scroll";  // "scroll", "hidden", "visible"
    public string y { get; set; } = "scroll";
}

public class WMBOSScrollbars
{
    public string visibility { get; set; } = "auto";      // "auto", "visible", "hidden"
    public string autoHide { get; set; } = "never";       // "never", "scroll", "leave", "move"
    public int autoHideDelay { get; set; } = 800;
    public bool dragScrolling { get; set; } = true;
    public bool clickScrolling { get; set; } = false;
    public bool touchSupport { get; set; } = true;
    public bool snapHandle { get; set; } = false;
}

public class WMBOSNativeScrollbarsOverlaid
{
    public bool showNativeScrollbars { get; set; } = false;
    public bool initialize { get; set; } = true;
}

public class WMBOSTextarea
{
    public bool dynWidth { get; set; } = false;
    public bool dynHeight { get; set; } = false;
    public string[] inheritedAttrs { get; set; } = {"style", "class"};
}
```

--------------------------------

### BlazorOverlayScrollbars Component Methods

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

A collection of methods to interact with the BlazorOverlayScrollbars component instance via reference.

```APIDOC
## BlazorOverlayScrollbars Methods

### Description
Methods available on the BlazorOverlayScrollbars component instance to control behavior, lifecycle, and scrolling.

### Methods
- **Constroy()**: Reconstructs the component instance.
- **Destroy()**: Destroys and disposes the current instance, removing extensions and DOM elements.
- **Update(bool force)**: Updates the instance. If force is true, performs a complete update.
- **Scroll(x, y, duration)**: Sets scroll position. Parameters can be (string, string, int) or (int, int, int). Default duration is 1000.
- **Sleep()**: Disables DOM observation and interaction. Reset by calling Update().
- **ScrollStop()**: Stops the current scroll animation.
```

--------------------------------

### Configuration Classes

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

Default configuration classes and settings for the scrollbar component.

```csharp
public  class  WMBOSConfigurations
{
	public  string  className { get; set; } = "os-theme-dark";
	public  string  themePath { get; set; } = null;
	public  string  resize { get; set; } = "none";
	public  bool  sizeAutoCapable { get; set; } = true;
	public  bool  clipAlways { get; set; } = true;
	public  bool  normalizeRTL { get; set; } = true;
	public  bool  paddingAbsolute { get; set; } = true;
	public  bool  autoUpdate { get; set; } = false;
	public  int  autoUpdateInterval { get; set; } = 33;
	public  WMBOSOverflowBehavior  overflowBehavior { get; set;]
	public  WMBOSNativeScrollbarsOverlaid  nativeScrollbarsOverlaid { get; set; }
	public  WMBOSScrollbars  scrollbars { get; set; }
	public  WMBOSTextarea  textarea { get; set; }

	public  WMBOSConfigurations()
	{
		this.overflowBehavior = new  WMBOSOverflowBehavior();
		this.nativeScrollbarsOverlaid = new  WMBOSNativeScrollbarsOverlaid();
		this.scrollbars = new  WMBOSScrollbars();
		this.textarea = new  WMBOSTextarea();
	}
}

public  class  WMBOSNativeScrollbarsOverlaid
{
	public  bool  showNativeScrollbars { get; set; } = false;
	public  bool  initialize { get; set; } = true;
}

public  class  WMBOSOverflowBehavior
{
	public  string  x { get; set; } = "scroll";
	public  string  y { get; set; } = "scroll";
}

public  class  WMBOSScrollbars
{
	public  string  visibility { get; set; } = "auto";
	public  string  autoHide { get; set; } = "never";
	public  int  autoHideDelay { get; set; } = 800;
	public  bool  dragScrolling { get; set; } = true;
	public  bool  clickScrolling { get; set; } = false;
	public  bool  touchSupport { get; set; } = true;
	public  bool  snapHandle { get; set; } = false;
}

public  class  WMBOSTextarea
{
	public  bool  dynWidth { get; set; } = false;
	public  bool  dynHeight { get; set; } = false;
	public  string[] inheritedAttrs { get; set; } = {"style", "class"};
}
```

--------------------------------

### Blazor Overlay Scrollbars Component Parameters

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Reference for all available parameters for the BlazorOverlayScrollbars component, including content slots, styling, IDs, configurations, and callback event handlers.

```csharp
// Component parameters
[Parameter] public RenderFragment BlazorOverlayScrollbarsContent { get; set; }  // Main content
[Parameter] public RenderFragment BlazorOverlayScrollbarsLoading { get; set; }  // Loading state content
[Parameter] public string CssClass { get; set; }                                 // Additional CSS classes
[Parameter] public string Id { get; set; }                                       // Element ID
[Parameter] public WMBOSConfigurations Configurations { get; set; }              // Configuration object
[Parameter] public string ProjectName { get; set; }                              // Assembly name for callbacks

// Callback parameters (all require [JSInvokable] static methods)
[Parameter] public string CallbackOnInitialized { get; set; }
[Parameter] public string CallbackOnInitializationWithdrawn { get; set; }
[Parameter] public string CallbackOnDestroyed { get; set; }
[Parameter] public string CallbackOnScrollStart { get; set; }
[Parameter] public string CallbackOnScroll { get; set; }
[Parameter] public string CallbackOnScrollStop { get; set; }
[Parameter] public string CallbackOnContentSizeChanged { get; set; }
[Parameter] public string CallbackOnHostSizeChanged { get; set; }
[Parameter] public string CallbackOnUpdated { get; set; }
```

--------------------------------

### Include Default Icon Font Stylesheet

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/BlazorWasmDemo/wwwroot/css/open-iconic/README.md

Link the default Open Iconic stylesheet for standalone icon font usage.

```html
<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
```

--------------------------------

### Implement Basic Component Usage

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Wrap content, textareas, or iframes with the BlazorOverlayScrollbars component to apply custom scrollbars.

```razor
@page "/demo"

<BlazorOverlayScrollbars>
    <BlazorOverlayScrollbarsContent>
        <p>Your scrollable content goes here...</p>
        <p>More content that overflows the container...</p>
        <p>The native scrollbar will be replaced with a custom overlay scrollbar.</p>
    </BlazorOverlayScrollbarsContent>
    <BlazorOverlayScrollbarsLoading>
        <b>Loading...</b>
    </BlazorOverlayScrollbarsLoading>
</BlazorOverlayScrollbars>

@* Textarea with custom scrollbars *@
<BlazorOverlayScrollbars>
    <BlazorOverlayScrollbarsContent>
        <textarea class="form-control"></textarea>
    </BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>

@* Iframe with custom scrollbars (same-origin required) *@
<BlazorOverlayScrollbars>
    <BlazorOverlayScrollbarsContent>
        <iframe src="iframe-sample.html"></iframe>
    </BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>
```

--------------------------------

### Apply Built-in Themes to Blazor Overlay Scrollbars

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Apply pre-built themes by setting the className property of WMBOSConfigurations. Multiple themes are available for different visual styles.

```razor
@page "/themes"

<BlazorOverlayScrollbars Configurations="configThickDark">
    <BlazorOverlayScrollbarsContent>
        <h2>os-theme-thick-dark</h2>
        <p>Content with thick dark scrollbars...</p>
    </BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>

<BlazorOverlayScrollbars Configurations="configThinLight">
    <BlazorOverlayScrollbarsContent>
        <h2>os-theme-thin-light</h2>
        <p>Content with thin light scrollbars...</p>
    </BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>

@code {
    public WMBOSConfigurations configThickDark;
    public WMBOSConfigurations configThinLight;
    public WMBOSConfigurations configRoundDark;
    public WMBOSConfigurations configBlockDark;
    public WMBOSConfigurations configMinimalLight;

    protected override void OnInitialized()
    {
        // Available themes:
        // os-theme-dark, os-theme-light
        // os-theme-block-dark, os-theme-block-light
        // os-theme-minimal-dark, os-theme-minimal-light
        // os-theme-round-dark, os-theme-round-light
        // os-theme-thick-dark, os-theme-thick-light
        // os-theme-thin-dark, os-theme-thin-light

        configThickDark = new WMBOSConfigurations {
            className = "os-theme-thick-dark"
        };

        configThinLight = new WMBOSConfigurations {
            className = "os-theme-thin-light"
        };

        configRoundDark = new WMBOSConfigurations {
            className = "os-theme-round-dark"
        };

        configBlockDark = new WMBOSConfigurations {
            className = "os-theme-block-dark"
        };

        configMinimalLight = new WMBOSConfigurations {
            className = "os-theme-minimal-light"
        };
    }
}
```

--------------------------------

### Register Component Callbacks

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

Define static methods with the [JSInvokable] attribute and link them to component callback parameters.

```html
<BlazorOverlayScrollbars
	ProjectName="BlazorWasmDemo"
	CallbackOnInitialized="MyOnInitialized"
	CallbackOnScroll="MyOnScroll"
	CallbackOnUpdated="MyOnUpdated"
>
	<BlazorOverlayScrollbarsContent>
		your-html-here
		...
	</BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>
```

```c#
@code {
	[JSInvokable]
	public  static  void  MyOnInitialized()
	{
		System.Console.WriteLine("On Initialized");
	}
	
	[JSInvokable]
	public  static  void  MyOnScroll()
	{
		System.Console.WriteLine("On Scroll");
	}

	[JSInvokable]
	public  static  void  MyOnUpdated()
	{
		System.Console.WriteLine("On Updated");
	}
}
```

--------------------------------

### Include Foundation Icon Font Stylesheet

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/BlazorWasmDemo/wwwroot/css/open-iconic/README.md

Link the Foundation-specific stylesheet for using Open Iconic with Foundation projects.

```html
<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">
```

--------------------------------

### Register WMBOS Service

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Register the required service in the application's dependency injection container.

```csharp
// Program.cs or Startup.cs
builder.Services.AddWMBOS();
```

--------------------------------

### Include Bootstrap Icon Font Stylesheet

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/BlazorWasmDemo/wwwroot/css/open-iconic/README.md

Link the Bootstrap-specific stylesheet to use Open Iconic with Bootstrap projects.

```html
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
```

--------------------------------

### Use Individual SVG Icons

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/BlazorWasmDemo/wwwroot/css/open-iconic/README.md

Display individual SVG icons by referencing their path. Ensure to include an 'alt' attribute for accessibility.

```html
<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
```

--------------------------------

### Component Structure

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/README.md

The basic layout of the BlazorOverlayScrollbars component.

```html
<BlazorOverlayScrollbars>
	<BlazorOverlayScrollbarsContent>
		your content here
	</BlazorOverlayScrollbarsContent>
	<BlazorOverlayScrollbarsLoading>
		your loading component here
	</BlazorOverlayScrollbarsLoading>
</BlazorOverlayScrollbars>
```

--------------------------------

### Apply Custom Configurations to Blazor Overlay Scrollbars

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Use WMBOSConfigurations to set custom scrollbar behavior and appearance. Pass the configurations instance to the component's Configurations parameter.

```razor
@page "/configurations"

<BlazorOverlayScrollbars Configurations="configurations" CssClass="your-custom-class" Id="your-custom-id">
    <BlazorOverlayScrollbarsContent>
        <div style="min-width: 2000px;">
            <h2>Custom Configured Scrollbars</h2>
            <p>Content with both horizontal and vertical scrolling...</p>
        </div>
    </BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>

@code {
    public WMBOSConfigurations configurations;

    protected override void OnInitialized()
    {
        configurations = new WMBOSConfigurations {
            className = "os-theme-round-dark",
            resize = "both",
            paddingAbsolute = true
        };
        configurations.scrollbars.clickScrolling = true;
        configurations.scrollbars.autoHide = "scroll";
        configurations.scrollbars.autoHideDelay = 500;
    }
}
```

--------------------------------

### Control Blazor Overlay Scrollbars with Component Methods

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Use a component reference to call methods like Destroy, Constroy, Update, and Scroll on the Blazor Overlay Scrollbars component. Ensure the component is initialized before calling these methods.

```razor
@page "/methods"

<BlazorOverlayScrollbars @ref="theOverlay">
    <BlazorOverlayScrollbarsContent>
        <p>Content that can be scrolled programmatically...</p>
        <p>Use the buttons below to control scrolling.</p>
        <p>More paragraphs to enable scrolling...</p>
        <p>Even more content here...</p>
    </BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>

<div class="controls">
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleDestroy())">Destroy</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleConstroy())">Constroy</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleUpdate())">Update</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleScroll(null, "50%"))">Scroll to Y 50%</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleScroll(0, 0))">Scroll to Top</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleSleep())">Sleep</button>
    <button class="btn btn-primary btn-sm" @onclick="@(e => SampleScrollStop())">Scroll Stop</button>
</div>

@code {
    public BlazorOverlayScrollbars theOverlay;

    // Reconstruct the scrollbar component after it has been destroyed
    public async void SampleConstroy()
    {
        await theOverlay.Constroy();
    }

    // Destroy and dispose the current instance, removing all custom elements from DOM
    public async void SampleDestroy()
    {
        await theOverlay.Destroy();
    }

    // Force update the component (true = complete update, false = partial update)
    public async void SampleUpdate()
    {
        await theOverlay.Update(true);
    }

    // Scroll to position using string values (supports percentages like "50%")
    public async void SampleScroll(string x, string y)
    {
        // Parameters: x position, y position, duration in ms (default 1000)
        await theOverlay.Scroll(x, y);
    }

    // Scroll to position using integer pixel values
    public async void SampleScroll(int x, int y)
    {
        await theOverlay.Scroll(x, y, 500);  // Custom duration of 500ms
    }

    // Put the instance to sleep - stops all DOM observation and scroll responses
    public async void SampleSleep()
    {
        await theOverlay.Sleep();
    }

    // Stop any current scroll animation
    public async void SampleScrollStop()
    {
        await theOverlay.ScrollStop();
    }
}
```

--------------------------------

### Integrate Custom CSS Theme with Blazor Overlay Scrollbars

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Use a custom class name and specify the path to your CSS file in the WMBOSConfigurations to apply a unique scrollbar design.

```razor
@page "/custom-theme"

<BlazorOverlayScrollbars Configurations="customTheme">
    <BlazorOverlayScrollbarsContent>
        <h2>Custom Themed Scrollbars</h2>
        <p>Content with your custom scrollbar design...</p>
    </BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>

@code {
    public WMBOSConfigurations customTheme;

    protected override void OnInitialized()
    {
        customTheme = new WMBOSConfigurations {
            className = "os-my-custom-template",
            themePath = "css/os-my-custom-template.css"
        };
    }
}
```

--------------------------------

### Use Icon Font with Foundation

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/BlazorWasmDemo/wwwroot/css/open-iconic/README.md

Apply Foundation-specific icon classes to span elements. Include 'title' for tooltips and 'aria-hidden' for accessibility.

```html
<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Use Icon Font with Bootstrap

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/BlazorWasmDemo/wwwroot/css/open-iconic/README.md

Apply Open Iconic classes to span elements for Bootstrap integration. Use 'title' for tooltips and 'aria-hidden' for accessibility.

```html
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Use SVG Sprite Icons

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/BlazorWasmDemo/wwwroot/css/open-iconic/README.md

Incorporate icons from an SVG sprite for a single request. Add a general class to the SVG and specific classes to the 'use' tag for styling.

```html
<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>
```

--------------------------------

### IWMBOS Interface Definition

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

Defines the low-level service interface for programmatic control of scrollbar instances. This interface is typically injected and used internally by the component.

```csharp
public interface IWMBOS
{
    void Configure();
    Task Init(ElementReference element, WMBOSConfigurations configurations, Dictionary<string, string> callbacks);
    Task Destroy(string referenceId);
    Task Constroy(ElementReference element, WMBOSConfigurations configurations, Dictionary<string, string> callbacks);
    Task Update(string referenceId, bool force);
    Task Scroll(string referenceId, string x, string y, int duration);
    Task Scroll(string referenceId, int x, int y, int duration);
    Task Sleep(string referenceId);
    Task ScrollStop(string referenceId);
}
```

--------------------------------

### IWMBOS Interface

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

The underlying service interface that provides low-level control over scrollbar instances. This is injected automatically and used internally by the component.

```APIDOC
## IWMBOS Interface

The underlying service interface that provides low-level control over scrollbar instances. This is injected automatically and used internally by the component.

```csharp
public interface IWMBOS
{
    void Configure();
    Task Init(ElementReference element, WMBOSConfigurations configurations, Dictionary<string, string> callbacks);
    Task Destroy(string referenceId);
    Task Constroy(ElementReference element, WMBOSConfigurations configurations, Dictionary<string, string> callbacks);
    Task Update(string referenceId, bool force);
    Task Scroll(string referenceId, string x, string y, int duration);
    Task Scroll(string referenceId, int x, int y, int duration);
    Task Sleep(string referenceId);
    Task ScrollStop(string referenceId);
}
```
```

--------------------------------

### Blazor Component with Callback Events

Source: https://context7.com/welisonmenezes/wm-blazor-overlay-scrollbars/llms.txt

This Blazor component utilizes BlazorOverlayScrollbars and subscribes to various scroll and lifecycle events. Ensure the ProjectName is set correctly for JS interop. Static methods are used for callbacks.

```razor
@page "/callbacks"

<BlazorOverlayScrollbars
    @ref="theOverlay"
    Configurations="configurations"
    ProjectName="BlazorWasmDemo"
    CallbackOnInitialized="MyOnInitialized"
    CallbackOnInitializationWithdrawn="MyOnInitializationWithdrawn"
    CallbackOnDestroyed="MyOnDestroyed"
    CallbackOnScrollStart="MyOnScrollStart"
    CallbackOnScroll="MyOnScroll"
    CallbackOnScrollStop="MyOnScrollStop"
    CallbackOnContentSizeChanged="MyOnContentSizeChanged"
    CallbackOnHostSizeChanged="MyOnHostSizeChanged"
    CallbackOnUpdated="MyOnUpdated">
    <BlazorOverlayScrollbarsContent>
        <p>Scroll this content to trigger callbacks...</p>
        <p>More content for scrolling...</p>
    </BlazorOverlayScrollbarsContent>
</BlazorOverlayScrollbars>

<div class="reports">
    <h4>Callbacks triggered:</h4>
    <ul>
        <li>OnInitialized: <b>@counterOnInitialized</b></li>
        <li>OnScroll: <b>@counterOnScroll</b></li>
        <li>OnScrollStop: <b>@counterOnScrollStop</b></li>
    </ul>
</div>

@code {
    public BlazorOverlayScrollbars theOverlay;
    public WMBOSConfigurations configurations;
    public static int counterOnInitialized = 0;
    public static int counterOnScroll = 0;
    public static int counterOnScrollStop = 0;
    private static Action updateState;

    protected override void OnInitialized()
    {
        updateState = () => StateHasChanged();
        configurations = new WMBOSConfigurations {
            resize = "both"
        };
    }

    [JSInvokable]
    public static void MyOnInitialized()
    {
        counterOnInitialized++;
        updateState?.Invoke();
    }

    [JSInvokable]
    public static void MyOnInitializationWithdrawn()
    {
        // Fired when initialization aborted due to nativeScrollbarsOverlaid.initialize = false
        System.Console.WriteLine("Initialization withdrawn");
    }

    [JSInvokable]
    public static void MyOnDestroyed()
    {
        System.Console.WriteLine("Component destroyed");
    }

    [JSInvokable]
    public static void MyOnScrollStart()
    {
        System.Console.WriteLine("Scroll started");
    }

    [JSInvokable]
    public static void MyOnScroll()
    {
        counterOnScroll++;
        updateState?.Invoke();
    }

    [JSInvokable]
    public static void MyOnScrollStop()
    {
        counterOnScrollStop++;
        updateState?.Invoke();
    }

    [JSInvokable]
    public static void MyOnContentSizeChanged()
    {
        System.Console.WriteLine("Content size changed");
    }

    [JSInvokable]
    public static void MyOnHostSizeChanged()
    {
        System.Console.WriteLine("Host size changed");
    }

    [JSInvokable]
    public static void MyOnUpdated()
    {
        System.Console.WriteLine("Component updated");
    }
}
```

--------------------------------

### Style SVG Sprite Icons

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/BlazorWasmDemo/wwwroot/css/open-iconic/README.md

Control the size of icons by setting equal width and height on the SVG element using CSS.

```css
.icon {
  width: 16px;
  height: 16px;
}
```

--------------------------------

### Use Icon Font Standalone

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/BlazorWasmDemo/wwwroot/css/open-iconic/README.md

Apply the 'oi' class and 'data-glyph' attribute to span elements for standalone icon font implementation. Include 'title' and 'aria-hidden' for usability.

```html
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
```

--------------------------------

### Color SVG Sprite Icons

Source: https://github.com/welisonmenezes/wm-blazor-overlay-scrollbars/blob/master/BlazorWasmDemo/wwwroot/css/open-iconic/README.md

Set the 'fill' property on the 'use' tag to change the color of individual icons.

```css
.icon-account-login {
  fill: #f00;
}
```
Tokens:
Raw