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

原创文章,作者:wure,如若转载,请注明出处:https://blog.ytso.com/267641.html

(0)
上一篇 2022年6月18日
下一篇 2022年6月18日

相关推荐

发表回复

登录后才能评论