前言

先日、会社はお客様のデータを书いてページに入れるように言われました(ロゴ付きのフォームページです)、そのまま原生の直接上を选んで、1时间ぐらいのことだと思っていましたが(确かに1时间で书き终わりました)、テストでios(何もテストしていません.少なくともqqブラウザは)が入力する时、ページ がユーザーの体験に深刻な影响を及ぼします.
第3部を直接回転可能

オープンソース・ライブラリからのシナリオの検索

Vant Fieldコンポーネント
ソースコードを見ると、Fieldはblurイベント時にスクロールイベントを実行することがわかります.
コード: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() { //  blur 
  if (isIOS) {
   setRootScrollTop(getRootScrollTop());
  }
}

コードを貼るts

import { isServer } from '..'; //  
// ...
//  ios  
export function isIOS(): boolean {
  /* istanbul ignore next */
  return isServer
   ? false
   : /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());
}

コード:scroll.ts

//  
// ...
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);
}
// ...

オリジナルコードorソリューションに変換

ろんり

blur

を傍受する

ios

であるか否かを判断する.

元の位置にスクロール

コード#コード#

  //  ios
   function checkIsIOS(){
      return /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
   }
   //  （ ）
   function setRootScrollTop(value) {
      setScrollTop(window, value);
      setScrollTop(document.body, value);
   }
   //  
   function setScrollTop(el, value) {
      if ('scrollTop' in el) {
        el.scrollTop = value;
      } else {
        el.scrollTo(el.scrollX, value);
      }
   }
   //  
   function getRootScrollTop() {
      return (
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        0
      );
   }
   
   const isIOS = checkIsIOS();
   //  
   function resetScroll() { //  blur 
      if (isIOS) {
        //   
        setRootScrollTop(getRootScrollTop());
      }
   }
   const _input = document.querySelector('input');
    //  
   _input.onblur  = ()=>{
      console.log('onblur')
      resetScroll();
      // TODO: ... 
   }

私のブログ

http://blog.ncgame.cc/