IOS中弹出键盘后出现fixed失效现象的解决方案

Open boizz opened this issue 9 years ago • 1 comments

原理很简单，就是定义一个外框把页面包起来，把需要使用fixed定位的元素设置成absolute定位，然后设置外框元素的样式为overflow-y:scroll即可，下面是实例：假设外框元素为.wrap，需要fixed定位的元素为.position：

DOM

<html>
    <body>
        <div class=".wrap">
            <div class=".position"></div>
        </div>
    </body>
</html>

CSS

html, body, .wrap {
    width: 100%;
    height: 100%;
}
.wrap {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; //因为使用overflow滚动体验不如正常的页面滚动，加上这个样式以后滚动即会变得顺滑
}
.position {
    position: absolute;
}

May 24 '16 07:05 boizz

如果body下有和.wrap平级的一块dom，假设为content，高度大于屏幕高度，处于.wrap下方，你这个实现.content可能会露出吗？

Jul 30 '16 14:07 pingan1927