h5 ios输入框和键盘的兼容性优化指南

在can i use中查到的scrollIntoView的兼容性（主流浏览器中不考虑ie）

• Firefox 36 以上兼容
• chrome 61 以上兼容
• safiri 5.1开始 不兼容behavior中的smooth

  后续问题

  当然，这个解决方案智能解决部分机型的问题，要真正解决这个问题还是要依靠native端。

  在ios 和 安卓机型的问题

  因为设置了这个定时任务，就会有一个后续的问题出现，也是在落地项目中有遇到过的，在此说明一下。

  在上拉或下拉到头时，会出现背景白色的现象，因为有了这个定时器，它就会不断将视图拉回，导致页面抖动。
  如果在app层做了webview禁止拖动的话就不会有这个问题，当然不能完全依赖app，在程序中我们也需要做此方面的兼容优化。

  
   <div class="container"
     @touchStart="touchStart($event)"
     @touchEnd="touchEnd($event)">
   
   </div>

  
   touchStart(e) {
   this.clearTimer();
   },
   touchEnd(e) {
   this.repairIosInput();
   },
   clearTimer() {
    if(this.timer) {
     clearInterval(this.timer);
     this.timer = null;
    }else{
     return;
    }
   },
   repairIosInput() {
    if(this.timer) {
     return;
    }
    this.timer = setInterval(()=>{
     container.scrollIntoView({ 
     block: 'start',
     behavior: 'auto'
     })
    },300);
   }								 
   3/4   首页 上一页 1 2 3 4 下一页 尾页