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

Posted 2021-11-26 rakan0225

最近在项目中 总是遇到一些奇奇怪怪的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>