移动端从入坑到出坑

1.局部滚动

项目名称：果之友
地址：http://www.guozhiyou.com/Inde...
问题描述：要将红色的这块做局部滚动。

解决办法：先通过window.innerHeight读取到当前屏幕的高度，然后通过减去header和footer的高度，得到div的高度并且赋值上去，同时设置overflow:scroll，成功实现弹性滚动。但设置为局部滚动后会发现ios端和android端失去了滚动弹性，这里我们采取下面css来使滚动条恢复弹性。

overflow:auto;/* android4+ */-webkit-overflow-scrolling: touch; /* ios5+ */

2.移动端页面Input虚拟键盘弹出Fixed元素跟随页面滚动，fixed属性失效

bug页面布局如下：

index.html    {{index}}

 index.css    //px计算@function px2rem($px) {    $rem: 75px;    @return ($px/$rem) + rem;}*{  margin: 0;  padding: 0;}html,body{  height:100%;  width:100%;}.wrap{  width:100%;  height:100%;  font-size: px2rem(32px);}header {    position: fixed;    height: px2rem(100px);    line-height:px2rem(100px);    left: 0;    right: 0;    top: 0;    background-color: # efefef;}footer {    position: fixed;    height: px2rem(80px);    left: 0;    right: 0;    bottom: 0;    background-color: # efefef;    input{      height:px2rem(60px);      margin-top:px2rem(10px);    }}main {    margin-top: px2rem(100px);    margin-bottom: px2rem(80px);    // height: px2rem(2000px);    font-size:px2rem(36px);}

在input虚拟键盘未触发时fixed属性正常，如下图：

然后激活虚拟键盘，fixed属性失效，如下图：

解决方法：由于是在虚拟键盘激活后，页面 fixed 元素失效，导致跟随页面一起滚动，那么 如果页面不会过长出现滚动，那么即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。因此我们用flex布局的方式将body的全局滚动替换为main的局部滚动从而避免整个页面发生滚动。
html结构不变更改css如下：

//px计算@function px2rem($px) {    $rem: 75px;    @return ($px/$rem) + rem;}*{  margin: 0;  padding: 0;}html,body{  height:100%;  width:100%;}.wrap{  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;  -webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;  width:100%;  height:100%;  font-size: px2rem(32px);}header {    width:100%;    height: px2rem(100px);    line-height:px2rem(100px);    background-color: # efefef;}footer {    width:100%;    height: px2rem(80px);    background-color: # efefef;    input{      height:px2rem(60px);      margin-top:px2rem(10px);    }}main {  -webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;  overflow:auto;  -webkit-overflow-scrolling: touch; //为局部滚动恢复弹性}

如上图，虚拟键盘弹出后页面仍然正常。
2016年7月27日－－－后续还会持续更新，移动端遇到bug的小伙伴们也欢迎在评论中提出，会尽力帮助解决。

关键字：移动端web, flex, input, scroll

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！