处理ios软键盘弹起和收起时页面滚动问题
处理ios软键盘弹起和收起时页面滚动问题
背景:
在开发添加主播功能时,页面底部需要弹出一个抽屉弹窗,点击抽屉上的输入框,会唤起软键盘,由于iOS的软键盘触发方式是将页面滚动,所以导致页面位置偏移
bug描述:
<必现>iOS:添加主播成功后 页面会定位在节目设置页的最底部
解决过程:
经过google看了一大堆资料,找到了核心原因,就是ios的滚动scroll
效应。
网络上有大量的解决方案是获取当前页面的滚动高度(scrolltop
),然后在页面outfocus
时,使用window.scroll把页面滚动回去。
但是这个方法会存在很多问题
- 由于本身该页面就存在一个底部抽屉组件,scroll回去的时候页面滚动效果非常明显,页面就像重新渲染了一次,抽屉会重新弹起,体验非常差。
outfocus
不太稳定,页面上有select
和其他输入的时候,弹起选择框,也会触发onfocus
,整个页面就乱滚
核心问题其实是底下的主内容在乱动,所以把它固定住不要让他滚动就好了,所以最后还是选择在底部弹窗出现的时候把整个页面fixed固定住,阻止整个内容滚动。
- 获取弹窗出现是页面的
scrolltop
- 弹窗出现时设置style:
position:fixed; top:-scrollTop;
- 弹窗消失时,恢复原本的页面定位,并用
window.scroll(0, scrollTop)
恢复到原先页面的位置。
iOS
和Android
软键盘弹起/收起的不同形式:
在 IOS
上,
输入框(input
、textarea
或 富文本)获取焦点,软键盘弹起,页面(webview
)并没有被压缩,或者说高度(height
)没有改变,只是页面(webview
)整体往上滚了,且最大滚动高度(scrollTop
)为软键盘高度。
触发软键盘上的“收起/完成”按钮键盘或者输入框以外的页面区域时,输入框失去焦点,软键盘收起。注意:页面依然是键盘弹起时scroll到的位置。
在 Android
上,
输入框获取焦点,键盘弹起,但是页面(webview
)高度会发生改变,一般来说,高度为可视区高度(原高度减去软键盘高度),除了因为页面内容被撑开可以产生滚动,webview
本身不能滚动。
触发输入框以外的区域时,输入框失去焦点,软键盘收起。但是,触发键盘上的收起按钮键盘时,输入框并不会失去焦点,同样软键盘收起。页面恢复正常。
处理ios软键盘弹起和收起时页面滚动问题相关推荐
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...
- H5 (React) 移动端监听软键盘弹起、收起
前言:H5 有时底部按钮是固定定位,当页面上面需要用到输入内容时,会弹起软键盘,然后把底部固定的按钮也弹起来了,我们希望弹起软键盘时,底部的固定定位按钮隐藏,这里就需要对移动端软键盘弹起收起进行监听. ...
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...
- h5(移动端) 监听软键盘弹起、收起
https://blog.csdn.net/qq_38296051/article/details/109290225 https://blog.csdn.net/qq_42231156/articl ...
- 小程序ios软键盘弹起挡住input输入框
这是再写一个项目时偶然发现的一个小bug 要求我在点开页面的时候自动弹起键盘,我使用了input组件内的cursor-spacing属性,但是发现在ios上会出现错位的bug,后面我就使用了onKey ...
- h5 ios中软键盘弹起后 fixed定位失效
position: fixed;在ios手机中会存在一个失效情况: 如果页面有输入框存在,点击输入框软键盘弹起后会发生一个现象: 1.针对当前内容高度小于屏幕高度时: 上下滑动页面时候,发现之前fix ...
- H5软键盘弹起收回(IOS与Android)
IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) 参考文章: (1)解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) (2)https://www.cnblogs.com/zouw ...
- 软键盘弹起,导致底部被顶上去
计算出可视界面的高度,当软键盘弹起时让底部元素隐藏掉, 当键盘收起时再让它显示,实在没办法时这种方法也不失为一种方法 1 var h=document.documentElement.clientHe ...
最新文章
- 浏览器会缓存js文件
- RHEL7 timedatectl命令
- python udp 传输文件_python网络编程:UDP方式传输数据
- python tensorflow教程推荐_TensorFlow教程和文章推荐大全 -DZone AI
- 25个优秀的Ajax技术和实例
- js代码自动排版_接口测试平台代码实现9:菜单常显
- qgraphicsitem 复制副本_删除/删除/替换QGraphicsTextItem中的选定文本
- Centos7利用fpm制作rpm包(fpm安装及使用)
- 统一配置管理工具confd
- 软件技术基础复习提纲
- 为什么谐振时电抗为0_108kVA/108kV/27kV变频串联谐振试验装置
- csdn下载分获取方法
- Java工具集-数学(圆柱体,椎体工具类)
- Docker Swarm集群实践——部署篇
- 360漏洞修复出现网管版 将探路企业级市场?
- linux搭建pptpd服务器,最简单的Linux系统上的pptpd服务器安装
- 研究生导师的“难言之隐”
- 【Serverless】【认证服务】接入谷歌账号登录时提示错误码10
- python中单引号,双引号,三引号的区别
- linux下的ld命令(1)
热门文章
- 计算机之父——约翰·冯·诺依曼(现代计算机之父”、“博弈论之父”)
- 数据结构—— 构造散列函数的六种方法【直接定址法-数字分析法-平方取中法-折叠法-除留余数法-随机数法】
- [ZT]把IM做成避风塘
- depth peel_10个jQuery Page Peel插件
- HTML第二天学习笔记
- yyk冷热启动耗时.bat
- 可以用python实现一些小发明_【kimol君的无聊小发明】—用python写图片格式批量处理工具...
- android初学者_初学者:如何在Android设备上的打开的应用程序之间切换
- 太注重结果,可能就真的会发生“目的性颤抖”
- 树莓派新手使用iobroker日志三(米家全家桶加入iobroker)