最近一直在写移动端H5页面，遇见了很多问题，做个小小的总结~
痛心疾首的fixed定位问题
1. ios设备微信浏览器或者Safari中fixed定位部分跟随滑动跳动
灵魂画手#_#
老铁们一定切过这样的图，什么叫跳动，就是滑动时fixed定位的部分会跟着滑动，滑动结束后又弹回定位的位置，偶尔还会出现跟顶部底部粘住的现象，哇塞，这酷炫的效果差点没被产品怼出翔......
根据我（长期跟测试产品互怼）的经验，移动端尽量不要使用fixed定位，特别是傲娇的ios，总会给你意外的惊喜。所以这个效果要怎么实现呢，我目前觉得最好的办法就是：
全部使用position：absolute
就说上面这张图（是丑了点，示意示意），上代码：
//首先是html
<body>
<div class='header'>header</div>
<div class='main'>main</main>
<div class='footer'>footer</div>
</body>
//css
.header{
width:100%;
height:100px;
position:absolute;
left:0;
top:0;
}
.footer{
width:100%;
height:100px;
position:absolute;
left:0;
bottom:0;
overflow:auto;
}
.main{
width:100%;
position:absolute;
left:0;
right:0;
top:100px;
bottom:100px; //最后两句是关键
}
完美#_#
2.滑动卡顿问题
刚改完，测试又过来了，你这个滑动有问题，不可能，老夫写的代码怎么可能有......额，好像是哦，怎么滑的时候一卡一卡的
怎么才能像原生一样丝滑呢？？？这时候需要一个css属性：-webkit-overflow-scrolling
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
选择-webkit-overflow-scrolling: touch;就是这么丝滑~
3.弹出蒙层滑动下面页面也会跟着滑动问题
老铁们肯定也会遇到这种交互场景，弹出提示框等各种遮罩层，在遮罩层上滑动的时候下面的内容也会跟着滑动，这肯定是不好的。这个的解决方法很多，我说一种思路。
通过js控制body,html的样式。弹出遮罩层的时候将body，html的超出部分隐藏（overflow:hidden），关闭遮罩层的时候再改回over-flow：auto；
4.键盘弹出影响布局问题
肯定有很多道友，点击输入框弹出输入框要么顶了个按钮上来，要么吧底部顶上来了，所以你大兄弟头铁啊，不要用不要用不要用 fixed，不给自己挖坑！！！
你管我，我就这么写!（拿我四十米长的大刀来......）
解决思路有以下几种（具体情况具体处理，不好使不接受批评-_-#）：
- 最好的方当然是尽量不使用定位，布局从上到下定死
- 监听input的聚焦事件，聚焦的时候隐藏掉挤上来的按钮或者底部布局，失去焦点的时候再显示
- 同样可以使用媒体查询检测高度小于一定值时隐藏挤上来的部分
@media (max-height: 400px) {
.footer {
display: none;
}
}
- 你使用absolute定位也是会被顶上来的，可以利用js给页面一个定高
$(document).ready(function () {
$('body').height($('body')[0].clientHeight);
});
猴里希特，这才第一点就写了这么多，先到这里吧，剩下的下一篇继续......
网友评论