zoukankan      html  css  js  c++  java
  • 解决fixed在ios抖动问题

    最近公司项目做页面样式改版,需要把表单提交按钮都悬浮到页面最底部。

    用了fixed来使按钮悬浮,但在ios,页面超过一屏滑动的时候按钮会抖动。

    <template>
        <div id="main">
            <div class="content">
                <input type="text" placeholder="请输入XX">
                ...
                <footer>
                   <div class="footer">
                      <span>提交</span>
                   </div>
                 </footer>
            </div> 
        </div>
    </template>
    <style>
    footer .footer{
        width:100%;
        position:fixed;
        bottom:0
    }
    </style>    

    解决办法就是不要把footer放到和页面内容一个盒子里,拿出来,如下

    <template>
        <div id="main">
            <div class="content">
                <input type="text" placeholder="请输入XX">
                ...
            </div> 
            <footer>
                <div class="footer">
                   <span>提交</span>
                </div>
            </footer>
        </div>
    </template>
    <style>
    footer .footer{
        width:100%;
        position:fixed;
        bottom:0
    }
    </style>    

    这样做以后,按钮再也不会乱动了,完美

  • 相关阅读:
    作业5,6 2019/10/23
    作业1、2、3、4 2019/10/23
    实现Map传参Mybatis
    maven工程配置pom.xml实现mybatis的访问数据库操作
    测试
    Postman篇之命令行测试
    unittest框架
    测试
    测试
    测试
  • 原文地址:https://www.cnblogs.com/wxcbg/p/13640589.html
Copyright © 2011-2022 走看看