ios键盘把页面顶起来看不见顶部header内容

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 // 从根源解决问题，当然先要熟悉这个框架

标签：style,Header,ios,header,window,querySelector,document,page,页面
来源： https://www.cnblogs.com/hxjCode/p/16374085.html