首页 > 移动平台 > 详细

activeElement解决ios滚动到底部显示内容时,键盘挡住显示内容的问题

时间:2020-05-29 15:38:50      阅读:44      评论:0      收藏:0      [点我收藏+]

 

  场景

  最近在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‘);
            }   
        }

 

activeElement解决ios滚动到底部显示内容时,键盘挡住显示内容的问题

原文:https://www.cnblogs.com/tu-0718/p/12987568.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!