针对移动端软键盘调用后,fixed定位失效部分解决方案

1、偷梁换柱。用absolute替换fixed

js获取屏幕高度,并把外部容器的高度设置为屏幕高度,给需要fixed的dom设置position:absolute。

2、监测屏幕变化

当点击输入框的时候弹出然键盘,会触发屏幕变化,一旦屏幕变小时将原来的fixed样式设置成其他的标准的流式布局。屏幕回到原来的大小时就恢复原来的fixed样式

 var windowInnerHeight = window.innerHeight
 window.addEventListener("resize",()=>{
  if(!document.querySelector('.bottomBtn')){
    return
  }
  if(window.innerHeight < windowInnerHeight){
     document.querySelector('.bottomBtn').classList.add('staticPos') 
  }else{
   document.querySelector('.bottomBtn').classList.remove('staticPos')
  }
})

你可能感兴趣的:(HTML,CSS,JS)