Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-5618

enhance Clients.scrollIntoView() with scroll behavior and align

XMLWordPrintable

    • Icon: New Feature New Feature
    • Resolution: Unresolved
    • Icon: Normal 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.

            Unassigned Unassigned
            hawk hawk
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated: