Skip to content

Commit 3f45335

Browse files
majorimimajorimi
committed
Added more smooth scroll, bugfixes and demo updates.
1 parent 51e3609 commit 3f45335

File tree

10 files changed

+154
-52
lines changed

10 files changed

+154
-52
lines changed

‎.github/docs/JsInterop.md‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -171,11 +171,11 @@ Component implements `IAsyncDisposable` interface Blazor framework components al
171171

172172
### `IScrollHandler` Functions
173173
- **`ScrollToElementAsync`**: **`Task ScrollToElementAsync(ElementReference elementReference, bool smooth)`**<br />
174-
Scrolls the given element into the page view area.
174+
Scrolls the given element into the page view area. **Note: smooth scroll on element level might not supported by all browsers.**
175175
- **`ScrollToElementByIdAsync`**: **`Task ScrollToElementByIdAsync(string id, bool smooth)`**<br />
176-
Finds element by Id and scrolls the given element into the page view area.
176+
Finds element by Id and scrolls the given element into the page view area. **Note: smooth scroll on element level might not supported by all browsers.**
177177
- **`ScrollToElementByNameAsync`**: **`Task ScrollToElementByNameAsync(string name, bool smooth)`**<br />
178-
Finds element by name and scrolls the given element into the page view area.
178+
Finds element by name and scrolls the given element into the page view area. **Note: smooth scroll on element level might not supported by all browsers.**
179179
- **`ScrollToPageEndAsync`**: **`Task ScrollToPageEndAsync(bool smooth)`**<br />
180180
Scrolls to end of the page (X bottom).
181181
- **`ScrollToPageTopAsync`**: **`Task ScrollToPageTopAsync(bool smooth)`**<br />
@@ -196,18 +196,34 @@ Removes event listener for 'scroll' HTML event for the whole document/window by
196196
Implements `IAsyncDisposable` interface the injected service should be Disposed.
197197

198198
### `ElementReference` extensions
199-
- **`ScrollToElementAsync`**: **`Task ScrollToElementAsync(this ElementReference elementReference)`**<br />
200-
- **`ScrollToEndAsync`**: **`Task ScrollToEndAsync(this ElementReference elementReference)`**<br />
201-
- **`ScrollToTopAsync`**: **`Task ScrollToTopAsync(this ElementReference elementReference)`**<br />
202-
- **`ScrollToXAsync`**: **`Task ScrollToXAsync(this ElementReference elementReference, double xPos)`**<br />
203-
- **`ScrollToYAsync`**: **`Task ScrollToYAsync(this ElementReference elementReference, double yPos)`**<br />
204-
- **`GetScrollPositionAsync`**: **`Task<double> GetScrollPositionAsync(this ElementReference elementReference)`**<br />
199+
- **`ScrollToElementAsync`**: **`Task ScrollToElementAsync(this ElementReference elementReference, bool smooth = false)`**<br />
200+
Scrolls HTML page to given element. **Note: smooth scroll on element level might not supported by all browsers.**
201+
- **`ScrollToEndAsync`**: **`Task ScrollToEndAsync(this ElementReference elementReference, bool smooth = false)`**<br />
202+
Scrolls inside the given element to the bottom (end). **Note: smooth scroll on element level might not supported by all browsers.**
203+
- **`ScrollToTopAsync`**: **`Task ScrollToTopAsync(this ElementReference elementReference, bool smooth = false)`**<br />
204+
Scrolls inside the given element to the beginning (top). **Note: smooth scroll on element level might not supported by all browsers.**
205+
- **`ScrollToXAsync`**: **`Task ScrollToXAsync(this ElementReference elementReference, double xPos, bool smooth = false)`**<br />
206+
Scrolls inside the given element to the given X position. **Note: smooth scroll on element level might not supported by all browsers.**
207+
- **`ScrollToYAsync`**: **`Task ScrollToYAsync(this ElementReference elementReference, double yPos, bool smooth = false)`**<br />
208+
Scrolls inside the given element to the given Y position. **Note: smooth scroll on element level might not supported by all browsers.**
209+
- **`ScrollToAsync`**: **`Task ScrollToYAsync(this ElementReference elementReference, double xPos, double yPos, bool smooth = false)`**<br />
210+
Scrolls inside the given element to the given X and Y positions. **Note: smooth scroll on element level might not supported by all browsers.**
211+
- **`GetScrollXPositionAsync`**: **`Task<double> GetScrollXPositionAsync(this ElementReference elementReference)`**<br />
212+
Returns given element scroll X (left) position.
213+
- **`GetScrollYPositionAsync`**: **`Task<double> GetScrollYPositionAsync(this ElementReference elementReference)`**<br />
214+
Returns given element scroll Y (top) position.
205215
- **`IsElementHiddenAsync`**: **`Task<bool> IsElementHiddenAsync(this ElementReference elementReference)`**<br />
216+
Returns given element is visible on HTML document or not.
206217
- **`IsElementHiddenBelowAsync`**: **`Task<bool> IsElementHiddenBelowAsync(this ElementReference elementReference)`**<br />
218+
Returns given element is below of the view port.
207219
- **`IsElementHiddenAboveAsync`**: **`Task<bool> IsElementHiddenAboveAsync(this ElementReference elementReference)`**<br />
220+
Returns given element is above of the view port.
208221
- **`ScrollToElementInParentAsync`**: **`Task ScrollToElementInParentAsync(this ElementReference parent, ElementReference innerElement)`**<br />
222+
Scrolls inside the given parent element to the given inner element.
209223
- **`ScrollInParentByIdAsync`**: **`Task ScrollInParentByIdAsync(this ElementReference parent, string id)`**<br />
224+
Scrolls inside the given parent element to the given inner element by Id.
210225
- **`ScrollInParentByClassAsync`**: **`Task ScrollInParentByClassAsync(this ElementReference parent, string className)`**<br />
226+
Scrolls inside the given parent element to the given first found inner element by class name.
211227

212228
## Resize JS (See: [demo app](https://blazorextensions.z6.web.core.windows.net/jsinterop#resize-js))
213229
**Resize JS** is an **injectable `IResizeHandler` service** for Window (global) and HTML Elements resize event callback handlers.

‎src/Majorsoft.Blazor.Components.Common.JsInterop/Majorsoft.Blazor.Components.Common.JsInterop.xml‎

Lines changed: 32 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Majorsoft.Blazor.Components.Common.JsInterop/Scroll/ElementReferenceScrollExtensions.cs‎

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,18 @@ namespace Majorsoft.Blazor.Components.Common.JsInterop.Scroll
1212
public static class ElementReferenceScrollExtensions
1313
{
1414
/// <summary>
15-
/// Scrolls HTML page to given element
15+
/// Scrolls HTML page to given element.
1616
/// </summary>
1717
/// <param name="elementReference">Blazor reference to an HTML element</param>
18+
/// <param name="smooth">Scroll should jump or smoothly scroll Note: might not all browsers support it</param>
1819
/// <returns>Async Task</returns>
19-
public static async Task ScrollToElementAsync(this ElementReference elementReference)
20+
public static async Task ScrollToElementAsync(this ElementReference elementReference, bool smooth = false)
2021
{
2122
await using (var module = await elementReference.GetJsObject())
2223
{
2324
if (module is not null)
2425
{
25-
await module.InvokeVoidAsync("scrollToElement", elementReference);
26+
await module.InvokeVoidAsync("scrollToElement", elementReference, smooth);
2627
}
2728
}
2829
}
@@ -31,14 +32,15 @@ public static async Task ScrollToElementAsync(this ElementReference elementRefer
3132
/// Scrolls inside the given element to the bottom (end).
3233
/// </summary>
3334
/// <param name="elementReference">Blazor reference to an HTML element</param>
35+
/// <param name="smooth">Scroll should jump or smoothly scroll Note: might not all browsers support it</param>
3436
/// <returns>Async Task</returns>
35-
public static async Task ScrollToEndAsync(this ElementReference elementReference)
37+
public static async Task ScrollToEndAsync(this ElementReference elementReference, bool smooth = false)
3638
{
3739
await using (var module = await elementReference.GetJsObject())
3840
{
3941
if (module is not null)
4042
{
41-
await module.InvokeVoidAsync("scrollToEnd", elementReference);
43+
await module.InvokeVoidAsync("scrollToEnd", elementReference, smooth);
4244
}
4345
}
4446
}
@@ -47,14 +49,15 @@ public static async Task ScrollToEndAsync(this ElementReference elementReference
4749
/// Scrolls inside the given element to the beginning (top).
4850
/// </summary>
4951
/// <param name="elementReference">Blazor reference to an HTML element</param>
52+
/// <param name="smooth">Scroll should jump or smoothly scroll Note: might not all browsers support it</param>
5053
/// <returns>Async Task</returns>
51-
public static async Task ScrollToTopAsync(this ElementReference elementReference)
54+
public static async Task ScrollToTopAsync(this ElementReference elementReference, bool smooth = false)
5255
{
5356
await using (var module = await elementReference.GetJsObject())
5457
{
5558
if (module is not null)
5659
{
57-
await module.InvokeVoidAsync("scrollToTop", elementReference);
60+
await module.InvokeVoidAsync("scrollToTop", elementReference, smooth);
5861
}
5962
}
6063
}
@@ -64,14 +67,15 @@ public static async Task ScrollToTopAsync(this ElementReference elementReference
6467
/// </summary>
6568
/// <param name="elementReference">Blazor reference to an HTML element</param>
6669
/// <param name="xPos">Scroll X position</param>
70+
/// <param name="smooth">Scroll should jump or smoothly scroll Note: might not all browsers support it</param>
6771
/// <returns>Async Task</returns>
68-
public static async Task ScrollToXAsync(this ElementReference elementReference, double xPos)
72+
public static async Task ScrollToXAsync(this ElementReference elementReference, double xPos, bool smooth = false)
6973
{
7074
await using (var module = await elementReference.GetJsObject())
7175
{
7276
if (module is not null)
7377
{
74-
await module.InvokeVoidAsync("scrollToX", elementReference, xPos);
78+
await module.InvokeVoidAsync("scrollToX", elementReference, xPos, smooth);
7579
}
7680
}
7781
}
@@ -81,20 +85,40 @@ public static async Task ScrollToXAsync(this ElementReference elementReference,
8185
/// </summary>
8286
/// <param name="elementReference">Blazor reference to an HTML element</param>
8387
/// <param name="yPos">Scroll Y position</param>
88+
/// <param name="smooth">Scroll should jump or smoothly scroll Note: might not all browsers support it</param>
8489
/// <returns>Async Task</returns>
85-
public static async Task ScrollToYAsync(this ElementReference elementReference, double yPos)
90+
public static async Task ScrollToYAsync(this ElementReference elementReference, double yPos, bool smooth = false)
8691
{
8792
await using (var module = await elementReference.GetJsObject())
8893
{
8994
if (module is not null)
9095
{
91-
await module.InvokeVoidAsync("scrollToY", elementReference, yPos);
96+
await module.InvokeVoidAsync("scrollToY", elementReference, yPos, smooth);
9297
}
9398
}
9499
}
95100

96101
/// <summary>
97-
/// Returns given element scroll X position.
102+
/// Scrolls inside the given element to the given X and Y positions.
103+
/// </summary>
104+
/// <param name="elementReference">Blazor reference to an HTML element</param>
105+
/// <param name="xPos">Scroll X position</param>
106+
/// <param name="yPos">Scroll Y position</param>
107+
/// <param name="smooth">Scroll should jump or smoothly scroll Note: might not all browsers support it</param>
108+
/// <returns>Async Task</returns>
109+
public static async Task ScrollToAsync(this ElementReference elementReference, double xPos, double yPos, bool smooth = false)
110+
{
111+
await using (var module = await elementReference.GetJsObject())
112+
{
113+
if (module is not null)
114+
{
115+
await module.InvokeVoidAsync("scrollTo", elementReference, xPos, yPos, smooth);
116+
}
117+
}
118+
}
119+
120+
/// <summary>
121+
/// Returns given element scroll X (left) position.
98122
/// </summary>
99123
/// <param name="elementReference">Blazor reference to an HTML element</param>
100124
/// <returns>Async Task with X pos</returns>
@@ -110,6 +134,23 @@ public static async Task<double> GetScrollXPositionAsync(this ElementReference e
110134

111135
return 0;
112136
}
137+
/// <summary>
138+
/// Returns given element scroll Y (top) position.
139+
/// </summary>
140+
/// <param name="elementReference">Blazor reference to an HTML element</param>
141+
/// <returns>Async Task with Y pos</returns>
142+
public static async Task<double> GetScrollYPositionAsync(this ElementReference elementReference)
143+
{
144+
await using (var module = await elementReference.GetJsObject())
145+
{
146+
if (module is not null)
147+
{
148+
return await module.InvokeAsync<double>("getScrollYPosition", elementReference);
149+
}
150+
}
151+
152+
return 0;
153+
}
113154

114155
/// <summary>
115156
/// Returns given element is visible on HTML document or not.

0 commit comments

Comments
 (0)