Use the MudScrollbar as a component:

<MudScrollbar />

It doesn't matter where you use the component. You can place it start, end or whatever else. It overrides the native scrollbar.

MudScrollbar communicates with Selector parameter. If you set it null or empty, it means all scrollbars will affect in the application (while the razor page is loaded, so its better to place it in Layout page to use between pages).

Selector both supports id and class selectors in CSS. So both usage is valid (be sure that id selector starts with "#" and class selector starts with "."):

<MudScrollbar Selector="#id1" />
<div id="id1" />

<MudScrollbar Selector=".id2" />
<div class="id2" />

As you see, MudScrollbar affects all scrollbars which container's id or class match the selector.

With Selector property, multiple custom scrollbars in a single page is supported.

The parameters works with webkit based browsers like Edge, Chrome, Opera and Safari.

Firefox has different scrollbar mechanism, so the parameters doesn't work for firefox. MudScrollbar has FirefoxStyle parameter to adding styles manually.

This video shows some parameters that how to change scrollbar's width, color and thumb styles.

You need to add class to ListClass parameter. It should like this:

<MudScrollbar Selector=".id1" />
<MudSelect ListClass="id1" />