-
New Feature
-
Resolution: Unresolved
-
Normal
-
None
-
9.6.4
-
None
-
None
User Story
As an app developer, I want to specify the scroll behavior, vertical alignment, and horizontal alignment when using `Clients.scrollIntoView()`, so that I can control exactly how an element is scrolled into view within the viewport for an optimal user experience.
Acceptance Criteria
1. The Clients.scrollIntoView() function must accept additional parameters that determine the scroll behavior (`'auto'`, `'instant'`, or `'smooth'`), vertical alignment (`'start'`, `'center'`, `'end'`, or `'nearest'`), and horizontal alignment (`'start'`, `'center'`, `'end'`, or `'nearest'`).
2. The function must operate in a way that is consistent with the behavior defined by the `scrollIntoView()` method as specified in the MDN Web Docs.
3. The feature must be compatible with all modern web browsers that are supported by the ZK framework.
Details
The enhancement to the `Clients.scrollIntoView()` function is inspired by the native `scrollIntoView()` method's capabilities in modern web browsers. According to the MDN Web Docs, the method allows for the following configurations:
The `behavior` option to define the scrolling motion:
- `'auto'` (default) scrolls instantly in a "jump" fashion.
- `'smooth'` scrolls with a smooth animation.
The `block` option for vertical alignment:
- `'start'` aligns the element to the top of the viewport.
- `'center'` aligns the element to the center of the viewport.
- `'end'` aligns the element to the bottom of the viewport.
- `'nearest'` aligns the element to the nearest edge in the viewport.
The `inline` option for horizontal alignment:
- `'start'` aligns the element to the left of the viewport.
- `'center'` aligns the element to the center of the viewport horizontally.
- `'end'` aligns the element to the right of the viewport.
- `'nearest'` aligns the element to the nearest edge horizontally.
- relates to
-
ZK-5097 Reconsider the API of Anchornav to make Anchornav more consistent with other ZK component.
- Closed