关于position:fixed在ios上通用的解决方法

Posted rakan0225

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于position:fixed在ios上通用的解决方法相关的知识,希望对你有一定的参考价值。

最近在项目中 总是遇到一些奇奇怪怪的css样式问题,在网上找了一大堆方法 都没什么用, 最后仔细思考了之后发现,并不是没用,而是适应条件不一样,话不多说直接进入主题。

假如你的项目需要滚动的地方上一层有很多个div包着,并且也有position:fixed的div包着 还有一堆烂七八糟的css样式,这时你想滚动的那个页面本来是有顶部固定或者是底部固定,到后面都会随着页面一起滚动,在ios上会这样,安卓却不会,解决方法其实很简单,把需要滚动的部分用一个div包起来 然后也fixed就可以了。

例如:

<div class=‘header‘>顶部固定</div>

<div class=‘content-list‘>

<ul>

<li>1212121</li>

.....

</ul>

</div>

<style>

.header{

position:fixed

top:0;

width:100%;

height:40px;

left:0;

right:0;

}

.content-list{

position:fixed;

top:40px;

width:100%;

overflow-y:auto;

left:0;

bottom:0;

right:0

}

</style>

以上是关于关于position:fixed在ios上通用的解决方法的主要内容,如果未能解决你的问题,请参考以下文章

position fixed 在ios上滑动不固定问题

ios下position:fixed失效的问题解决

移动端position:fixed小结

ios position:fixed 上滑下拉抖动

关于position:fixed的注意点

关于position:fixed;的居中问题