移动端绝对（固定）定位问题与解决

移动端绝对（固定）定位问题

在公司做移动端界面时，暴露了几个隐藏的不容易发现的问题，最典型的就是绝对（固定）定位的问题，趁着现在项目差不多做完了，记录一下。

出现的问题

原因

• 首先这种需求使用定位做是完全没用任何毛病的。当手机在输入文字的时候，手机回调出键盘，键盘和浏览器的窗口时同层的，就导致浏览器的高度变低了，定位的元素自然也就往上漂浮了。

解决方案

这个问题真的时搞了我很久，最初以为是没有给出写死的高度的原因，发现无论怎么给高度结果都一样，也参考了网上很多的咨询，这种问题有以下几种解决方案

方案 1 （亲测可行，但是复杂，考虑的点太多，不推荐）

判断 input 标签是否为获取焦点状态

• 当时选中状态时，将按钮隐藏
• 当按钮失去焦点时，恢复

方案 2 （方便，最佳解决方案）

• 监听浏览器窗口的高度，有resize事件 当窗口高度发生变化，说明调出了键盘，这时候隐藏按钮即可

代码演示

因为公司使用 Vue 开发，这里就上传部分 Vue 代码即可

    mounted(){
        this.screemHeight = document.body.clientHeight // 先获取当前的高度
        let that = this // 保存一下this
        window.addEventListener('resize', function () { // 监听 resize 事件
        if(this.document.body.clientHeight != that.screemHeight){
            that.showflagaaa = false // 判断是否需要显示的 flag标志
        }else{
            that.showflagaaa = true
        }
        });
    },

总结

以上就可以完美的解决，代码演示那里可以使用箭头函数 就不用保存 this 指向了。