preface

A few days ago to write a client company recorded data into the page (that is, with logo form page), select directly, directly with the native thought it for an hour of things (really finished writing) for an hour, but testing found ios (no test more, at least qq browser) will lead to input push seriously affect the user experience on a page.

You can go straight to part three

Find solutions from open source libraries

Vant the Field component

Field executes a scroll event during a blur event

Post code: reset-scroll.ts

// reset-scroll.ts
import { isIOS as checkIsIOS } from '.. /validate/system';
import { getRootScrollTop, setRootScrollTop } from './scroll';

const isIOS = checkIsIOS();

/* istanbul ignore next */
export function resetScroll() { // This function is executed after the blur event is triggered
  if(isIOS) { setRootScrollTop(getRootScrollTop()); }}Copy the code

Post code system. Ts

import { isServer } from '.. '; // It is not important to judge whether the server is rendering or not
// ...
// Determine whether the ios server render directly do not determine
export function isIOS() :boolean {
  /* istanbul ignore next */
  return isServer
   ? false
   : /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());
}
Copy the code

Post code: scroll.ts

// Some code
// ...
export function getRootScrollTop() :number {
  return (
   window.pageYOffset ||
   document.documentElement.scrollTop ||
   document.body.scrollTop ||
   0
  );
}
// ...
export function setScrollTop(el: ScrollElement, value: number) {
  if ('scrollTop' in el) {
   el.scrollTop = value;
  } else{ el.scrollTo(el.scrollX, value); }}// ...
export function setRootScrollTop(value: number) {
  setScrollTop(window, value);
  setScrollTop(document.body, value);
}
// ...
Copy the code

Convert to native code or solutions

logic

  1. Listen to the blur
  2. Check whether it is ios
  3. Scroll to original position

code

<style>
   input{
      /* Emulated input box position */
      margin-top:500px;
   }
</style>
<input type="text" >

<script>
  // Check whether it is ios
   function checkIsIOS(){
      return /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
   }
   // Set scroll elements (compatibility issues)
   function setRootScrollTop(value) {
      setScrollTop(window, value);
      setScrollTop(document.body, value);
   }
   // Set the scroll position
   function setScrollTop(el, value) {
      if ('scrollTop' in el) {
        el.scrollTop = value;
      } else{ el.scrollTo(el.scrollX, value); }}// Get the scroll position
   function getRootScrollTop() {
      return (
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        0
      );
   }
   
   const isIOS = checkIsIOS();
   // Execute the restore scrollbar
   function resetScroll() { // This function is executed after the blur event is triggered
      if (isIOS) {
        // This is the scrollbar positionsetRootScrollTop(getRootScrollTop()); }}const _input = document.querySelector('input');
    // Listen for lost events
   _input.onblur  = (a)= >{
      console.log('onblur')
      resetScroll();
      // TODO:. Other operating
   }
</script>


Copy the code