前言

前几天公司让写一个客户数据入录页面（就是个带了logo的表单页面），就直接选择用原生的直接上，原以为也就个把小时的事情（确实个把小时就写完了），但是测试发现ios（没有测试多个，至少qq浏览器会）会输入的时候导致页面上推严重影响用户体验。

可直接转第三部分

由开源库找到方案

Vant Field组件

通过看源码发现Field在blur事件时候会执行一个滚动事件

贴代码：reset-scroll.ts

1// reset-scroll.ts
2import { isIOS as checkIsIOS } from '../validate/system';
3import { getRootScrollTop, setRootScrollTop } from './scroll';
4
5const isIOS = checkIsIOS();
6
7/* istanbul ignore next */
8export function resetScroll() { // 触发blur事件后会执行该函数
9  if (isIOS) {
10   setRootScrollTop(getRootScrollTop());
11  }
12}

贴代码 system.ts

1import { isServer } from '..'; // 不是很重要单纯的判断是不是服务器渲染
2// ...
3// 判断是不是ios 服务器渲染直接不判断
4export function isIOS(): boolean {
5  /* istanbul ignore next */
6  return isServer
7   ? false
8   : /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());
9}

贴代码：scroll.ts

1// 部分代码
2// ...
3export function getRootScrollTop(): number {
4  return (
5   window.pageYOffset ||
6   document.documentElement.scrollTop ||
7   document.body.scrollTop ||
8   0
9  );
10}
11// ...
12export function setScrollTop(el: ScrollElement, value: number) {
13  if ('scrollTop' in el) {
14   el.scrollTop = value;
15  } else {
16   el.scrollTo(el.scrollX, value);
17  }
18}
19// ...
20export function setRootScrollTop(value: number) {
21  setScrollTop(window, value);
22  setScrollTop(document.body, value);
23}
24// ...

转换成原生代码 or 解决方案

逻辑

1. 监听blur
2. 判断是否是ios
3. 滚动到原来的位置

代码

1<style>
2   input{
3      /* 模拟输入框位置 */
4      margin-top:500px;
5   }
6</style>
7<input type="text" >
8
9<script>
10  // 检查是否是ios
11   function checkIsIOS(){
12      return /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
13   }
14   // 设置滚动元素（兼容性问题）
15   function setRootScrollTop(value) {
16      setScrollTop(window, value);
17      setScrollTop(document.body, value);
18   }
19   // 设置滚动位置
20   function setScrollTop(el, value) {
21      if ('scrollTop' in el) {
22        el.scrollTop = value;
23      } else {
24        el.scrollTo(el.scrollX, value);
25      }
26   }
27   // 获取滚动位置
28   function getRootScrollTop() {
29      return (
30        window.pageYOffset ||
31        document.documentElement.scrollTop ||
32        document.body.scrollTop ||
33        0
34      );
35   }
36   
37   const isIOS = checkIsIOS();
38   // 执行还原滚动条
39   function resetScroll() { // 触发blur事件后会执行该函数
40      if (isIOS) {
41        //  这是滚动条位置
42        setRootScrollTop(getRootScrollTop());
43      }
44   }
45   const _input = document.querySelector('input');
46    // 监听失去事件
47   _input.onblur  = ()=>{
48      console.log('onblur')
49      resetScroll();
50      // TODO: ...其他操作
51   }
52</script>
53
54