background

There are many input boxes on the form page on the mobile terminal. Data verification is required when users enter data and submit data. If the verification fails, users are not allowed to submit data. For example, the name cannot contain facial expressions or special characters, and the age cannot be a string.

When the form page is long and the submit button is clicked, the form item that failed the verification is no longer in the visible area of the mobile phone. For better experience, the page needs to be automatically rolled so that the user can see the first form item that failed the verification.

Analysis of the

There are two key elements involved in the above problem, the first validation failed form item and the submit button. First, analyze the possible scenarios for these two key elements:

  1. Both elements are in the viewable area => do not scroll the page
  2. If the first form item that fails verification is not in the viewable area => scroll the page
  3. The submit button is a bottom-sucking button and covers the form items that fail the verification => scroll the page

Scenarios where pages need to be scrolled are actually checkable form items that are not in the viewable area, and there are two possible scenarios for this.

plan

When it comes to whether or not the page is in the viewable area, simply calculate the position of the first form item that failed the checksum and then do some comparison to determine whether or not you need to scroll the page.

Of course, the simplest solution is to use the native API. On the mobile side, there are two scrollIntoView and scrollIntoViewIfNeeded. The usage page is very simple:

Element.scrollIntoView(true)   // The top of the element will be aligned with the top of the visible area of the scroll area in which it is located
Element.scrollIntoView(false)  // The bottom of the element will be aligned with the bottom of the visible area of the scroll area in which it is located

// scrollIntoViewIfNeeded determines if the element is in the viewable area and does not scroll if it is, such as if the element is in the middle of the page.
Element.scrollIntoViewIfNeeded()
Copy the code

For form pages, scrollIntoViewIfNeeded is best used to implement checkable scrolling without passing form items, perfectly compatible with the first two scenarios in the above analysis.

However, when the submit button bottoms out, this time things are different. The viewable area contains fixed elements, that is, when an element is covered by a fixed element, scrollIntoViewIfNeeded is considered to be in viewable access, that is, it does not scroll the element.

// Gets the position of the element in the visual window
const { bottom } = Element.getBoundingClientRect()
const clientHeight = document.documentElement.clientHeight
// Calculate whether the suction element blocks the table items
if (bottom + fixedElementHeight > clientHeight) {
  // Block the element, then scroll up, the specific scroll position can be adjusted according to the actual situation
  body.scrollTop += bottom + fixedElementHeight - clientHeight
}
Copy the code

You can also use the scrollTo function to add transition animations.

summary

  1. throughscrollIntoViewIfNeeded, the element determines if it is in the viewable area and scrolls if it is not.
  2. throughgetBoundingClientRectYou can get the position of the element in the visual area.
  3. Fixed elements also occupy the height of the visible area and need to handle scrolling on demand.