H5开发IOS兼容性问题

本文分享在做H5开发的时候在IOS设备上的一些兼容性问题的解决方法
1、设置overflow-y时滚动区域不流畅问题

-webkit-overflow-scrolling: touch;

2、键盘弹起收缩后区域留白问题

document.body.addEventListener("focusout", () => { //解决键盘弹起收缩后页面留白问题
  var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
  window.scrollTo(0, Math.max(scrollHeight - 1, 0));
})

3、new Date(str)报错问题
是因为低版本的safari浏览器对new Date(str)有严格校验，对于诸如2017-08-30 10:23:22 这样形式的字符串是不支持的。后来使用replace(/-/g,”/”)将时间字符串转换为2017/08/30 10:23:22解决了问题
4、弹框后禁止body滚动问题

let $body = document.querySelector('body')
      if (newVal) {  //禁止滚动
        $body.style.overflow = 'hidden'
        $body.style.position = 'fixed'
        $body.style.width = '100%'
      } else {
        $body.style.overflow = 'auto'
        $body.style.position = ''
        $body.style.width = ''
      }