VisualViewport
How to use the VisualViewport class of the bit Butil?
Usage
To use the browser VisualViewport features you need to inject the Bit.Butil.VisualViewport class and use it like this:
@inject Bit.Butil.VisualViewport visualViewport
@code {
var offsetLeft = await VisualViewport.GetOffsetLeft();
}Methods
GetOffsetLeft:
Returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in CSS pixels, or 0 if current document is not fully active. (MDN).
@inject Bit.Butil.VisualViewport visualViewport
<BitButton OnClick="@GetOffsetLeft">GetOffsetLeft</BitButton>
<div>OffsetLeft: @offsetLeft</div>
@code {
private double offsetLeft;
private async Task GetOffsetLeft()
{
offsetLeft = await visualViewport.GetOffsetLeft();
}
}GetOffsetTop:
Returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in CSS pixels, or 0 if current document is not fully active. (MDN).
@inject Bit.Butil.VisualViewport visualViewport
<BitButton OnClick="@GetOffsetTop">GetOffsetTop</BitButton>
<div>OffsetTop: @offsetTop</div>
@code {
private double offsetTop;
private async Task GetOffsetTop()
{
offsetTop = await visualViewport.GetOffsetTop();
}
}GetPageLeft:
Returns the x coordinate of the left edge of the visual viewport relative to the initial containing block origin, in CSS pixels, or 0 if current document is not fully active. (MDN).
@inject Bit.Butil.VisualViewport visualViewport
<BitButton OnClick="@GetPageLeft">GetPageLeft</BitButton>
<div>pageLeft: @pageLeft</div>
@code {
private double pageLeft;
private async Task GetPageLeft()
{
pageLeft = await visualViewport.GetPageLeft();
}
}GetPageTop:
Returns the y coordinate of the top edge of the visual viewport relative to the initial containing block origin, in CSS pixels, or 0 if current document is not fully active. (MDN).
@inject Bit.Butil.VisualViewport visualViewport
<BitButton OnClick="@GetPageTop">GetPageTop</BitButton>
<div>pageTop: @pageTop</div>
@code {
private double pageTop;
private async Task GetPageTop()
{
pageTop = await visualViewport.GetPageTop();
}
}GetWidth:
Returns the width of the visual viewport, in CSS pixels, or 0 if current document is not fully active. (MDN).
@inject Bit.Butil.VisualViewport visualViewport
<BitButton OnClick="@GetWidth">GetWidth</BitButton>
<div>Width: @width</div>
@code {
private double width;
private async Task GetWidth()
{
width = await visualViewport.GetWidth();
}
}GetHeight:
Returns the height of the visual viewport, in CSS pixels, or 0 if current document is not fully active. (MDN).
@inject Bit.Butil.VisualViewport visualViewport
<BitButton OnClick="@GetHeight">GetHeight</BitButton>
<div>Height: @height</div>
@code {
private double height;
private async Task GetHeight()
{
height = await visualViewport.GetHeight();
}
}GetScale:
Returns the pinch-zoom scaling factor applied to the visual viewport, or 0 if current document is not fully active, or 1 if there is no output device. (MDN).
@inject Bit.Butil.VisualViewport visualViewport
<BitButton OnClick="@GetScale">GetScale</BitButton>
<div>Height: @height</div>
@code {
private double height;
private async Task GetScale()
{
height = await visualViewport.GetScale();
}
}AddResize, RemoveResize:
Fired when the visual viewport is resized. (MDN).
AddScroll, RemoveScroll:
Fired when the visual viewport is scrolled. (MDN).