自从进了公司以后都好久没写文章笔记了,现在重新开始,我会在segmentfault中记录一些开发中碰到的问题的解决方法,然后在简书中记录一些个人感想。
废话不多说,下面进入重点。
一.图示问题
由于我遇到的问题,光标太偏下,截图效果不佳,这里借助 "Mary哎呀小龙" 的图片 这里是
小龙同学的回答也很详细,大家也可以参考下,我利用另外一种方法进行解决。
二.问题描述
当fixed和input一起使用时,点击input,光标错位(一般会在input框偏下)。
这里除了这个问题,还有一个问题,弹出表单后,遮罩层后面的页面还能够随我们的滑动而滑动。
经过实际测试,只有在ios11及以上系统时,才会出现这个问题
不过fixed在移动端上也确实是个坑,特别是ios上面,会出现各种各样的问题,上次还遇到例如 返回顶部 按钮,用了fixed,结果整个页面无法滑动,固定在进入时的可视区域。
所以在移动端,不到万不得已还是不要用fixed的好
三.解决方法
解决方法就是弹出表单时给body加一个高度,这个高度等于设备可视区的高度,就能够解决上面说的两个问题
俗话说 「Talk is cheap. Show me the code」
弹出表单时
var h = $(window).height();
$("body,html").css({"overflow":"hidden","height":h+"px"});
当然别忘了,关闭表单时,使高度恢复原样
$("body,html").css({"overflow":"auto","height":"auto"});