1

ios 滑动区域不流畅 加上 -webkit-overflow-scrolling: touch;能解决,不过 -webkit-overflow-scrolling: touch;会引起滑动区域在部分ios系统偶尔不显示的问题(目前有ios11.2);ios微信浏览器中,输入框在底部,用fixed固定,调出输入法导致输入框遮挡

Blind 66
2019-08-14 提问
1 个回答
0

已采纳

-webkit-overflow-scrolling: touch;会引起滑动区域在部分ios系统偶尔不显示的问题:
再加上以下两行css解决:

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);

输入法遮挡问题:当前解决方案,尽量不要用fixed样式,再用以下:

             var u = navigator.userAgent;                 
             var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
             //判断是否为ios
             if(isIOS){
                 var ua = navigator.userAgent.toLowerCase();
                 var ver=ua.match(/cpu iphone os (.*?) like mac os/);
                 //获取ios版本
                 let vesion = ver[1].replace(/_/g,"");
                 vesion = vesion.substring(0,3)
                // alert(vesion)
                 if(vesion!=112){
                     setTimeout(() => {
                             //把输入框滚动到可视范围
                              document.getElementById('ins').scrollIntoView(true);
                      },1000)
                 }
             }

‘ins’为底部输入块,解决大部分苹果输入法遮挡问题,ios11.2 使用scrollIntoView(true)会起反作用,故除去,其他的还没发现。这样基本都可以实现了。
还有一个问题,收起输入法页面不会收回,就是会出现一片空白的区域的问题:
在失去焦点时调这个方法:
setTimeout(() => {

window.scrollTo(0, document.body.scrollTop + 1);
   document.body.scrollTop >= 1 && window.scrollTo(0,document.body.scrollTop - 1);  
}, 200)

图片如下:
clipboard.png

撰写答案

推广链接