forked from MudBlazor/MudBlazor
/
ScrollToTopExample.razor
31 lines (29 loc) · 1.32 KB
/
ScrollToTopExample.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@namespace MudBlazor.Docs.Examples
<div id="unique_id_scroll_section" class="ma-0" style="height:300px;overflow: auto;">
<MudPaper Elevation="0" Height="3500px" Class="d-flex flex-column justify-space-between py-6">
<MudText Typo="Typo.h3" Align="Align.Center">Scroll inside this container</MudText>
<MudText Typo="Typo.h3" Align="Align.Center">Some initial long text</MudText>
<MudText Typo="Typo.h3" Align="Align.Center">Middle text</MudText>
<MudText Typo="Typo.h3" Align="Align.Center">Bottom text</MudText>
<MudScrollToTop TopOffset="100"
OnScroll="OnScroll"
Selector="#unique_id_scroll_section"
VisibleCssClass="visible absolute"
HiddenCssClass="invisible">
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.ArrowUpward" Color="Color">Go to top</MudButton>
</MudScrollToTop>
</MudPaper>
</div>
@code{
Color Color = Color.Success;
private void OnScroll(ScrollEventArgs e)
{
Color = (e.FirstChildBoundingClientRect.Top*-1) switch
{
var x when x< 500 => Color.Primary,
var x when x < 1500 => Color.Secondary,
var x when x < 2500 => Color.Tertiary,
_=>Color.Error
};
}
}