IOS下fixed布局的问题

原创 NishavayaZhou 教程 HTML5 682阅读 2017-05-17 21:04:02 举报

最近在用VUE开发一个m站感觉坑比较多,很少事件写东西。
但是在开发到页面底部输入框的时候出现了一个很严重的问题。

IOS下fixed布局的问题
看到这样的设计稿,我相信大家第一个想法肯定和我一样用position的fixed来实现底部输入框的定位。
在安卓手机看起来的想过是完美,没有什么问题。
可是到了IOS就文献问题了,当虚拟键盘出现的时候他会覆盖输入框。
于是我在网上查了一下相关的资料,发现fixed在IOS的虚拟键盘出现的时候会失效。
这就完蛋了fixed属性失效,不用fixed就没有办法实现输入框固定在页面底部了。
我有借鉴了网上大神们的一些建议,更改了一下布局的方法

IOS下fixed布局的问题
我这边简单说一下,
底部输入框,继续采用fixed,而主题采用absolute布局需要加上一下两个属性
overflow-y: scroll;
/增加该属性,可以增加弹性 /
-webkit-overflow-scrolling: touch;
看到属性大家应该知道,这个方案的意思了吧,抛弃了body的滚动,而是使用主题的信息内容来滚动,
这样子可以解决当虚拟键盘出现的时候导致fixed属性失效而被遮盖
当我以为已经彻底解决了IOS下的问题时,发现可以拖动输入框来发生body的滚动,从而再次导致输入框被覆盖,
于是我决定当输入框获取到焦点的时候将时间禁止掉代码如下:
javascript 代码

输入框失去焦点的时候将touchmove事件去掉(由于项目的原因我并没有采取这个方案)

好了今天的踩坑到此结束了:如果大家觉得难以理解我可以将我的代码和图片等都列出来

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复