zoukankan      html  css  js  c++  java
  • h5 ios的软键盘会把固定定位在底部的导航栏顶上去的解决办法

    这个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是否一致。。这个办法亲测有效。。有疑惑找我。。

    但是最后 需求还是被砍了

  • 相关阅读:
    SqlServer 查看被锁的表和解除被锁的表
    Windows Server 2012 R2 或 2016 无法安装 .Net 3.5.1
    请求文件下载URL过长处理
    T4语法
    windows下 安装 rabbitMQ 及操作常用命令
    ubuntu系统启动qtceator时提示:Qt5.5.1/Tools/QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库
    升级到VS2013常见问题
    Windowns 无法启动 Office Software Protection Platform 服务,系统找不到指定的文件
    SVN clean失败解决方法
    使用PostSharp在.NET平台上实现AOP
  • 原文地址:https://www.cnblogs.com/lisiyang/p/10573264.html
Copyright © 2011-2022 走看看