h5 ios的软键盘会把固定定位在底部的导航栏顶上去的解决办法

最新推荐文章于 2025-04-07 16:50:18 发布

weixin_30496751

最新推荐文章于 2025-04-07 16:50:18 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发操作系统前端 ViewUI

原文链接：http://www.cnblogs.com/lisiyang/p/10573264.html

博客主要讲述了 iOS 系统中键盘弹起导致固定定位元素界面上移的 BUG。尝试多种网上方法无果后，采用监听滚动手动拽下元素的方式解决，虽实时监听有闪烁，但通过滚动时隐藏、结束时显示，并编写监听滚动结束函数，亲测有效，不过最终需求被砍。

这个BUG 主要是固定在 ios里面不生效导致的，只要键盘弹起就会把整个界面给弹上去，尝试了网上各种办法都没有很好地解决

后来自己用代码把固定定位的元素给拽下来的原理就是监听滚动把固定的元素手动抓下来

看代码

 var u = navigator.userAgent;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    if (isIOS) {
      document.body.addEventListener('focusin', () => {// 软键盘弹起事件
        window.onscroll = function (e) {
          clearTimeout(that.time2)
          let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          document.querySelector('.djq-editor-header').style.top = scrollTop + 'px';
          document.querySelector('.djq-editor-header').style.display = 'none';
          document.querySelector('.djq-editor-container').style.height = '300' + 'px';

          that.time2 = setTimeout(() => {// 这边是 判断键盘弹起的状态下 滚动结束后的状态
            let t2 = document.documentElement.scrollTop || document.body.scrollTop;
            that.setState({t2});
            if (t2 == scrollTop) {
              document.querySelector('.djq-editor-header').style.display = 'flex';
            }
          }, 180);
        }
      })

      document.body.addEventListener('focusout', () => {// 
        window.onscroll = null;
        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
        document.querySelector('.djq-editor-header').style.top = 0 + 'px';
        document.querySelector('.djq-editor-header').style.display = 'flex';
        document.querySelector('.djq-editor-container').style.height = '600px';
        clearTimeout(that.time2)
      })
    }

　　原理是就是键盘弹起时监听页面的滚动把弹上去的元素给拽下来，因为是实时监听，所以会有闪烁，这个时候我再滚动时候把他给隐藏了

然后再滚动结束的时候，再把他显示出来，这个时候就要写一个监听合适滚动结束的函数。。。代码就在上面原理是在滚动之后某个时间段

用定时器去判断最后的scrolltop是否与实时滚动的scrolltop是否一致。。这个办法亲测有效。。有疑惑找我。。

但是最后需求还是被砍了

转载于:https://www.cnblogs.com/lisiyang/p/10573264.html