猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 >

移动端下fixed布局的解决方案

2018-07-06 10:55:58 作者:yxl 次阅读 技术专栏

移动端开发过程中,相信很多人对于定位fixed都会遇到很多问题而头疼,底部fixed输入框被弹起,左边slide有输入框,fixed定位失效
,还有动态添加fixed定位,会有卡顿现象。所以,移动端下开发,尽量少用fixed布局。


以前左边是fixed 获取焦点时,手机键盘会把fix失效
下面介绍解决这种现象方法

1、布局

   大概的布局如下
     <html>
        <head></head>
        <body>
              <div>需要定位的内容</div>
             <div class=".body">
                      这里是主体内容
            </div>
            <div>需要定位的内容</div>
       </body>
   </html>
 //主要的样式如下,其他需要定位的内容可以放到.body div外面
     html {
    height: 100%;
      }
body {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.body{
      width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

2.isscroll 的使用

 这个滚动插件,官网有详细介绍
 

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: fixed
0

网友评论