当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 安卓移动端固定在底部的按钮被软件盘顶上去的解决方案

安卓移动端固定在底部的按钮被软件盘顶上去的解决方案

2020年07月18日  | 移动技术网IT编程  | 我要评论

问题描述

当安卓手机访问按钮吸底的页面时，处于absolute（绝对）定位或fixed（固定）定位的按钮，会被键盘顶上去，漂浮于键盘上方。而 IOS 则 不存在这个问题。

思路

监控屏幕大小的变化，当屏幕变小的时候让按钮隐藏起来，当屏幕大小与当前屏幕保持一致的时候，让按钮正常显示。

解决方案

  1. 原生 JS 实现
var h = document.body.scrollHeight;
window.onresize = function(){
  if (document.body.scrollHeight < h) {
    document.getElementById('btn').style.display = 'none';
  }else{
    document.getElementById('btn').style.display = 'block';
  }
};
  1. JQuery 实现
var win_h = $(window).height();//关键代码
window.addEventListener('resize', function () {
    if($(window).height() < win_h){
        $('#btn').hide();
    }else{
        $('#btn').show();
    }
});

本文地址：https://blog.csdn.net/sinat_33255495/article/details/107393046

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网