Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
boizz opened this issue May 24, 2016 · 1 comment
Open

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

boizz opened this issue May 24, 2016 · 1 comment

Comments

@boizz
Copy link

boizz commented May 24, 2016

原理很简单，就是定义一个外框把页面包起来，把需要使用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;
}
@pingan1927
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@pingan1927 @boizz