zoukankan      html  css  js  c++  java
  • activeElement解决ios滚动到底部显示内容时,键盘挡住显示内容的问题

      场景

      最近在IOS上遇到一个问题,当滑动到底部显示相应内容时,点击input框后内容被弹出键盘遮挡

      

       

      预期效果如下图

      

      解决方法

      使用activeElement属性,该属性返回文档中当前获得焦点的元素

      

        上面代码把返回文档中当前获得焦点的元素赋值给变量 currentFocusEle

        然后判断该焦点元素的className如果为header-freeclass-inputfooter-freeclass-input就直接return false

      下面是移动端实现滚动到指定位置显示隐藏内容的完整js代码

            let header = document.getElementById('header');
            let footerfreeclass = document.getElementById('FooterFreeClass');
    
            let wholeScrollHeight = document.documentElement.scrollHeight, // 能滚动的总高度
                visiableHeight = document.documentElement.clientHeight, // 可视区域高度
                currentOffset = document.documentElement.scrollTop || document.body.scrollTop; // 滚动的距离
            if (currentOffset > 200) {
                header.classList.add('nav-header-change');
            } else {
                header.classList.remove('nav-header-change');
            }
            if (footerfreeclass !== undefined && footerfreeclass !== null) {
                if (currentOffset > 200 && wholeScrollHeight - currentOffset - visiableHeight > 400) {
                    footerfreeclass.classList.add('footer-freeclass-block');
                } else {
                    let currentFocusEle = document.activeElement;
                    if (currentFocusEle.className === "header-freeclass-input footer-freeclass-input") {
                        //解决键盘弹出导致其隐藏的bug
                        return false;
                    }
                    footerfreeclass.classList.remove('footer-freeclass-block');
                }   
            }
  • 相关阅读:
    制作keil5的pack
    【转】链接脚本(1)
    mongodb数据到MySQL数据库 的迁移步骤
    mongo副本集设置主库权重,永远为主
    mongodb副本集的从库永久性设置setSlaveOk
    Ubuntu系统查看mongo得慢日志,及一些操作
    Ubuntu系统下手动释放内存
    linux下面得小数计算
    Syncthing搭建
    ubuntu搭建ftp服务器
  • 原文地址:https://www.cnblogs.com/tu-0718/p/12987568.html
Copyright © 2011-2022 走看看