ios键盘顶起页面是ios的bug,为了就是不让输入框被键盘挡住。但是他妈你为啥让页面超出显示呢?本来不能滚动的页面,让你给弄成能滚动了。
我的解决思路是,首先给页面添加 scroll ,滚动监听。然后利用visualViewport 给他添加一个resize监听,当键盘弹起resize监听到了,视图高度发生改变,这个时候在滚动监听里给他设置你的header 定位为fixed,距离顶部document.documentElement.scrollTop也就是滚动距离。然后给他添加禁止触摸事件,意思就是打开键盘就让滚动页面,哎,都别好。但是输入框在顶部的时候,还是有问题,谁能解决,教教我
下面是我代码样列(仅供参考)
let scroll_State = false let viewHeight = window.innerHeight function cannot_darg (e) { e.preventDefault(); } window.addEventListener('scroll',function(){ window.pageScrollTop = document.documentElement.scrollTop if(scroll_State) { clearTimeout(myVar); var myVar = setTimeout(function(){ // console.log(window.pageScrollTop,'--------------',toolbar_height) document.querySelector("#page_Header").style.position = 'fixed' document.querySelector("#page_Header").style.width = '100%' document.querySelector("#page_Header").style.left="0" document.querySelector("#page_Header").style.top=window.pageScrollTop+ 'px' document.querySelector("#page_Header").style.zIndex = '1' }, 100); document.addEventListener('touchmove',cannot_darg,{passive: false}) // 设置样式 } }) window.visualViewport.addEventListener("resize", function(){ scroll_State = window.visualViewport.height < viewHeight if(!scroll_State) { document.querySelector("#page_Header").style.position = 'unset' document.removeEventListener('touchmove',cannot_darg,{passive: false}) } });
还有他们说解决键盘上显示一行字,这个也可以用定位给他固定过来。贴几个关于这方面的博客,让明白明白是怎么回事
http://www.alloyteam.com/2020/02/14265/comment-page-1/#prettyPhoto // 介绍关于ios键盘顶起页面的问题
http://www.ionic.wang/js_doc-index-id-66.html // 从根源解决问题,当然先要熟悉这个框架
原创文章,作者:wure,如若转载,请注明出处:https://blog.ytso.com/267641.html