最近项目遇到了滚动和fixed问题,考虑到iOS下position: fixed的诸多问题,考虑使用position: absolute代替,然而万万没想到,居然这个绝对定位的元素居然也跟着滚动起来…

布局


  <div class="container">
    <div class="content"></div>
    <div class="fake-fixed"></div>
  </div>



  .container {
    height: 100px;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .content {
    height: 500px;
  }
  .fake-fixed {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
  }

期望效果

.content.container内局部滚动,.fake-fixed一直保持在.container底部,表现类似fixed

实际效果

.fake-fixed随着.content滚动而滚动

修复

在添加一层容器

   <div class="container">
    <div class="content-wrapper">
      <div class="content"></div>
    </div>
    <div class="fake-fixed"></div>
  </div>


  .container {
    height: 100px;
    position: relative;
    overflow: hidden;

  }
  .content-wrapper {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .content {
    height: 500px;
  }
  .fake-fixed {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
  }